スマホのメニュー展開時にスクロールさせない
2020-05-28
スマホサイトでは、メニューは折りたたんでいたりして、ハンバーガーメニューを押した時に展開させるといった方法が一般的だと思います。
そして、メニューを展開させた時に、メニューは固定しているのに、ページ自体が動いてしまっていて、ちょっと違和感がある人もいるかもしれません。
今回は、その解消するための記述をしていきます。
メニューは、position:fixed;で固定しているとします。
まず、CSSで下記を記述しておきます。
1 2 3 4 5 6 |
body { width: 100%; } body.fixed { position: fixed; } |
あとは、jQueryで、ハンバーガーメニューを押した時の動作を記述するだけです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var flg = false; var winPos; $('.menu-btn').on('click', function(){ $(this).toggleClass('active'); $('.nav').toggleClass('open'); if(flg == false) { winPos = $(window).scrollTop(); $('body').addClass('fixed')..css({'top': -winPos}); flg = true; } else { $('body').removeClass('fixed').css({'top': 0}); window.scrollTo( 0 , winPos ); flg = false; } }); |
5,6行目では、ハンバーガーメニューを押した時、ボタンと展開させるメニューにクラスを付与しています。
それぞれの動きについては、CSSに記述しておきます。
8行目以降がページを動かさないための処理になります。
bodyにクラスを付与して、ハンバーガーメニューを押した時のスクロール位置を取得して、topの位置をしています。
1,2行目の変数を入れるための、宣言もお忘れなく。