スマホのメニュー展開時にコンテンツ部分がスクロールしてしまう。
スマホのメニューはアコーディオンであったり、横スライドメニューであったり、様々ですが、ボタンを押すと展開するタイプが多いですね。
その際にフリックするとコンテンツ部分がスクロールできてしまって困ることありますよね。
そんなときはコンテンツ部分となるbodyタグを固定して動かないようにしましょう！
下記のコードをコピペで実装!!
cssファイルにコピペ
|
1 2 3 4 5 |
.fixed { position: fixed; width: 100%; height: 100%; } |
jsファイルにコピペ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(function(){ var state = false; var scrollpos; $('.toggle').on('click', function(){ if(state == false) { scrollpos = $(window).scrollTop(); $('body').addClass('fixed').css({'top': -scrollpos}); $('.menu').addClass('open'); state = true; } else { $('body').removeClass('fixed').css({'top': 0}); window.scrollTo( 0 , scrollpos ); $('.menu').removeClass('open'); state = false; } }); }); |
- メニューのボタンのクラスが
.toggle(上記の5行目) - メニューの本体部分のulが
.menu(上記の9行目・14行目)
であると想定していますので、ご自分の環境に合わせて変更してください。