JS スマホのメニュー展開時にスクロールさせない

2020-05-28

スマホサイトでは、メニューは折りたたんでいたりして、ハンバーガーメニューを押した時に展開させるといった方法が一般的だと思います。
そして、メニューを展開させた時に、メニューは固定しているのに、ページ自体が動いてしまっていて、ちょっと違和感がある人もいるかもしれません。
今回は、その解消するための記述をしていきます。
メニューは、position:fixed;で固定しているとします。

まず、CSSで下記を記述しておきます。

あとは、jQueryで、ハンバーガーメニューを押した時の動作を記述するだけです。

5,6行目では、ハンバーガーメニューを押した時、ボタンと展開させるメニューにクラスを付与しています。
それぞれの動きについては、CSSに記述しておきます。

8行目以降がページを動かさないための処理になります。
bodyにクラスを付与して、ハンバーガーメニューを押した時のスクロール位置を取得して、topの位置をしています。

1,2行目の変数を入れるための、宣言もお忘れなく。