【スマホ】メニュー出現時にスクロールを固定する方法2選

スマートフォンでメニュー出現時や、モーダルウィンドウ出現時に背景をスクロールさせず固定させるコーディング方法を2つ紹介します。

jQueryとCSSのみで簡単に実装できるので、必要に応じて使い分けてください。

共通のHTMLとCSS

HTML

<div class="nav_open">クリックでナビが出現</div>
<nav>
  <ul>
    <li><a href="hogehoge">hogehogeページへ</a></li>
    <li><a href="hogehoge2">hogehoge2ページへ</a></li>
    <li><a href="hogehoge3">hogehoge3ページへ</a></li>
  </ul>
</nav>

CSS

nav{
  position:relative;
}
nav ul{
  position:absolute;
  top:0;
  left:100%;
  transition:.3s all;
}
nav ul.open{
  left:0%;
}
nav ul li{
  border_bottom:1px solid #000;
}
nav ul li a{
  display:block;
  padding:10px 20px;
  color:#333;
}

HTMLやCSSは必要に応じて変更してください。

簡易化したコードを載せています。

内容はいたってシンプルです。

nav_openというクラスのついたdiv要素をクリックまたはタップすると、nav直下のul要素にopenというクラスがついて右からナビゲーションが出てくるというものです。

openクラスはjQueryで付与します。

方法1

Javascript / jQuery

var state = false;
$('.nav_open').click(function(){
  $('ul').toggleClass('open');
  if (state == false){
    $(window).on('touchmove.noScroll', function(e) {
      e.preventDefault();
    });
    state = true;
  } else {
    $(window).off('.noScroll');
    state = false;
  }
});

以下の番号は◯行目を指します。

1. stateという変数にfalseを代入しておきます。
2. nav_openをクリックした時の動作の記述を開始します。
3. ulタグにopenクラスがついてなければ付与、あれば削除します。
4. もしstateがfalseならば6、7行目を実行
5. windowにイベントを設定
6. windowを固定
7. stateをfalseからtrueに書き換える
8. stateがtrueの場合の処理（ナビゲーションを閉じる時の処理）
9. stateがtrueということは、6、7行目が実行されており、スクロールできないのでそれを解除
10. stateをfalseに書き換える

これでnav_openをクリックまたはタップする度に、stateがfalseとtrueに交互に書き変わるので、ナビゲーションが出ている間は背景のスクロールが固定され、ナビゲーションを閉じるとスクロールができるようになります。

方法2

CSSに追加

body.fixed{
  position: fixed;
  width:100%;
}

Javascript / jQuery

var state = false;
var scrollpos;
$('. nav_open').on('click', function(){
  $('ul').toggleClass('open');
  if(state == false) {
    scrollpos = $(window).scrollTop();
    $('body').addClass('fixed').css({'top': -scrollpos});
    state = true;
  } else {
    $('body').removeClass('fixed').css({'top': 0});
    window.scrollTo( 0 , scrollpos );
    state = false;
  }
});

こちらも方法1とそんなに大きくは変わりません。

順に説明していきます。

1. stateという変数にfalseを代入しておきます。
2. scrollposという変数を作っておきます。nav_openをクリックまたはタップした時のスクロールの位置を取得・代入するためです。
3. nav_openをクリックした時の動作の記述を開始します。
4. ulタグにopenクラスがついてなければ付与、あれば削除します。
5. もしstateがfalseならば6〜8行目を実行
6. .nav.openをクリックした時のトップからの位置を取得・代入
7. bodyタグにfixedクラスを付与、位置をscrollposにCSSで指定
8. stateをfalseからtrueに書き換える
9. stateがtrueの場合の処理（ナビゲーションを閉じる時の処理）
10. bodyタグからfixedクラスを削除
11. スクロールが固定されていた時の位置を取得し、同位置からスクロールできるように
12. stateをfalseに書き換える

となります。

まとめ

方法1と方法2で違うのは、Javascriptでスクロールを無効にしているか、CSSで背景を固定しているかです。

動作に変わりはありませんし、コーディングも大差ありませんが、場合によっては方法1ではうまくいかなかったが、方法2ではちゃんと動いたということがあるので、2つとも紹介しました。

少し記述を変更すればモーダルウィンドウの時にも、背景を固定できるように応用できます。

モーダルウィンドウのパターンは、またいつか紹介します。

コンテンツに関する質問やご要望は

Facebook

Twitter

より受け付けております。

お気軽にご質問ください。(内容によってはお答えできない場合もございます)