【jQuery】初期表示は開いていて、スクロールすると閉じるfixedのナビゲーション｜Blog｜株式会社トライム

週末はクリスマスですね。
今年も残りわずか、一年あっという間です。

さて今回は初期表示は開いていて、スクロールすると閉じるfixedのナビゲーションです。
ボタンを押して意図的に開いたときにはスクロールしても閉じないようにしています。

デモ

See the Pen vyMGvP by leo (@leo-trym) on CodePen.

ソース

HTML

<header class="header">
  <div class="btn"><i class="fa fa-bars" aria-hidden="true"></i></div>
  <nav class="nav">
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">BLOG</a></li>
    </ul>
  </nav>
</header>

CSS

.nav {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.nav ul li {
  display: inline-block;
  padding: 0 1em;
  color: #ccc;
}

.nav ul li a {
  color: #fff;
}

.btn {
  position: fixed;
  z-index: 1100;
  top: 0;
  right: 2.5%;
  cursor: pointer;
  font-size: 35px;
}

JS

$(function () {

  var $nav = $('.nav'), // ナビのクラス
      $btn = $('.btn'); // ボタンのクラス

  $btn.click(function(){
    $nav.stop().slideToggle(function(){

      if ( $(this).is(':visible') ) {
        $(this).addClass('open'); // ボタンで開いたらクラスにopenを付与
      } else {
        $(this).removeClass('open'); // 閉じたらopenを削除
      }

    });
  });

  var wintop = $(window).scrollTop(); // 読み込み時のスクロール位置

  $(window).on('scroll', function () {
    if ( !$nav.hasClass('open') && wintop != $(window).scrollTop() ) { // クラスにopenがなく、wintopとスクロール位置がずれたら
      $nav.slideUp(); // ナビゲーションを隠す
    }
  });

});