1
はい、私は知っています、この質問は何回も尋ねられており、私はすべての記事を読んだことがあります。残念ながら、私の場合、提案された解決策は機能しません。私はリンクをクリックすると表示されるいくつかの隠しメニューを持つ固定位置のトップバーを持っています。メニューも固定されています。固定位置のスクロール可能なメニュー
これらのメニューがウィンドウに収まらない場合、私はこれらのメニューをスクロール可能にする必要があります。同時に、メニューが開いている場合、メインウィンドウのスクロールバーとスクロールを無効にしたいと思います。
Jsfiddleの例では、メニュー1はウィンドウに収まらず、スクールバーが必要です。 Menu2はウィンドウに収まるため、スクロールバーは必要ありません。
$(document.body).on("click", "#menu1", function(e) {
e.preventDefault();
$("#bmen").css("display", "none");
$("#amen").toggle();
});
$(document.body).on("click", "#menu2", function(e) {
e.preventDefault();
$("#amen").css("display", "none");
$("#bmen").toggle();
});body {
padding: 0;
margin: 0;
border: 0;
line-height: 1;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
color: #333;
font-size: 100%;
}
.menuwrap {
width: 100%;
position: fixed;
background: black;
z-index: 1000;
}
.menu {
background: grey;
color: white;
padding: 10px;
max-width: 400px;
margin: 0;
margin: 0 auto;
}
.table {
display: table;
table-layout: auto;
table-layout: fixed;
width: 100%;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
.maincontainer {
padding: 10px;
max-width: 400px;
background: #c0c0c0;
margin-right: auto;
margin-left: auto;
}
.menu-end {
padding-top: 36px;
}
.hidden {
background: grey;
position: fixed;
width: 100%;
z-index: 1000;
}
#amen,
#bmen {
margin: 0 auto;
max-width: 420px;
display: none;
}
.amen1,
.bmen1 {
position: absolute;
padding: 0 10px;
top: 36px;
background: #D3D3D3;
max-width: 420px;
width: 100%;
box-sizing: border-box;
}
.righti {
top: 36px;
background: #CECECE;
width: 100%;
box-sizing: border-box;
}
.righti ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.righti li {
border-bottom: 1px solid #dedede;
float: left;
width: 100%;
font-weight: bold;
}
.righti li a {
color: #000;
text-decoration: none;
font-size: 13px;
float: left;
display: block;
padding: 10px 0;
width: 100%;
}
.righti li a:hover {
color: #ff0000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menuwrap">
<div class="menu">
<div class="table">
<div class="table-row">
<div class="table-cell">
<a id="menu1" href="#">Menu1</a>
</div>
<div class="table-cell">
<a id="menu2" href="#">Menu2</a>
</div>
</div>
</div>
</div>
</div>
<div class="hidden">
<div id="amen">
<div class="amen1 righti">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
<li><a href="#">13</a></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
<li><a href="#">16</a></li>
<li><a href="#">17</a></li>
<li><a href="#">18</a></li>
<li><a href="#">19</a></li>
<li><a href="#">20</a></li>
<li><a href="#">21</a></li>
<li><a href="#">22</a></li>
<li><a href="#">2</a></li>
<li><a href="#">23</a></li>
<li><a href="#">24</a></li>
<li><a href="#">25</a></li>
<li><a href="#">26</a></li>
<li><a href="#">27</a></li>
<li><a href="#">28</a></li>
<li><a href="#">29</a></li>
<li><a href="#">30</a></li>
<li><a href="#">31</a></li>
<li><a href="#">32</a></li>
<li><a href="#">33</a></li>
<li><a href="#">34</a></li>
<li><a href="#">35</a></li>
</ul>
</div>
</div>
<div id="bmen">
<div class="bmen1 righti">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</div>
</div>
<div class="menu-end"></div>
<div class="maincontainer">
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>