【jQuery】スマホメニューを表示させた時に背景を固定する方法

今回はスマホメニューを開いた時に背景をスクロールしないように固定する方法を紹介します。

 

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

body.fixed{
  position: fixed;
  width:100%;
}
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;
}

 

最初の状態ではleft: 100%でナビゲーションを画面外の右側に配置しておきます。

nav_openクラスが入ったdivタグをクリックすると、navタグ直下のulタグにopenクラスが入り、left: 0となって右からナビゲーションが出てくる仕組みです。

openクラスはjQueryによって操作します。

 

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.scrollTop( 0 , scrollpos );
    state = false;
  }
});

 

openクラスはtoggleClass()で付け外しを行います。

初期状態では変数stateにfalseを代入しておき、if文の前半の処理を行うようにします。やっていることはスクロール量を取得し、そこで固定しているだけです。処理の後は変数stateをtrueに書き換えます。

変数stateがtrue(つまりメニューを閉じるとき)ならbodyタグからfixedクラスを外し、固定していた位置から再びスクロールできるようにします。