#スマホのドロワーメニュー・ハンバーガーメニューOPEN時にスクロールしても、背景画面はスクロールせずに固定されている状態にしたい
##現在の状況
JQURYのslideToggleを利用し、ドロワーメニューを設置しておりますが、メニューを開いてスクロールすると背景ごとスクロールされている状態です。
##HTML
<p class="menu-btn gmenu">MENU</p> <div class="container"> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p> <div class="gnav"> <div id="menu-list"> <ul> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> </ul> <p class="list-close menu-btn" title="close">閉じるボタン</p> </div> </div> </div>
##CSS
.container { position: relative; width: 100%; } .gnav { clear: both; top:0px; position: absolute; width: 100%; z-index: 2; background-color: #FFFFFF; } #menu-list {display: none;}
#JS
<script type="text/javascript"> $(function(){ $(".menu-btn").click(function(){ $("#menu-list").slideToggle(300); }); }); </script>
メニューOPEN時に背景を固定するにはどのようにすればいいでしょうか?
よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー