【 QooQ カスタマイズ 】 ナビゲーションバーを下スクロールで消えて、上スクロールで表示されるようにする

こんにちは、HARU（ @HARU ）です。

最近は QooQ のカスタマイズ記事をあまり書いていない気がするので、たまには純正 QooQ のカスタマイズを例に使える JQuery を紹介したいと思います。

今回は、画面上部に固定したナビゲーションバーを完全固定ではなく、下スクロールで消えて、上スクロールで表示されるようにします。

画面サイズが小さい場合、固定のナビゲーションバーの分だけ、読める部分を圧迫しているように感じることがあります。その解決策ですね。

また追加で、開いたナビメニューはスクロールを検知すると自動で閉じるようにしました。

通常、ナビメニューはボタンを押すことで開き、もう一度ボタンを押さないと閉じません。

ナビゲーションバーを固定している人であれば、この機能はあったに越したことはないと思います！

JQuery の導入

JQuery を導入していない場合、以下の記事を参考に導入してください。

動作イメージ

ページ上部に固定されたナビゲーションバーが、下スクロールで非表示、上スクロールで表示されます。

また、開いたナビメニューはスクロールを検知すると、自動的に閉じます。

ナビゲーションバーの固定方法は以下を参考にしてください。

CSS 変更

CSS#navigation#navigation-contentの変更を行います。

#navigation-contentは 768px 以下で利用する CSS です。

  #navigation{
    padding: .2em 0 .2em 0;
    font-size: 1.5rem;
    background: $(brand.subcolor);
    color: $(brand.subfont);
    position: sticky;  /* 位置固定 */
    top: -100%; /* 基本は見えないようにする */
    transition: all 0.3s ease; /* 表示スピード */
    z-index: 1000; /* 各自調整してください */
  }

  #navigation-content{
    display:none;
    background: $(brand.subcolor);
    position: absolute; /* ナビメニューを表示させるため */
    width: 100%;
    left: 0;
    padding: .5em;
  }

CSS 追記

以下の CSS を Blogger テンプレートの CSS 欄に記述します。

  #navigation.disp{
    top:0; /* ナビをトップに表示する */
  }

Script 追記

以下の Script を</body>の直上に記述します。

  <!--　ナビゲーションバー表示/非表示　-->
  <script>
  var startPos = 0,winScrollTop = 0;
  $(window).on('scroll',function(){
    winScrollTop = $(this).scrollTop();
    if (winScrollTop >= startPos) {
      //下にスクロール
      $('#navigation').removeClass('disp'); //非表示
      $('#navigation-button').removeAttr('checked').prop('checked', false).change(); //ナビを閉じる
    }
    else {
      //上スクロール
      $('#navigation').addClass('disp'); //表示
      $('#navigation-button').removeAttr('checked').prop('checked', false).change(); //ナビを閉じる
    }
    startPos = winScrollTop;
  });
  </script>

Script の補足

//下にスクロール、//上にスクロールの中を、変更することで動作を変えることができます。

例えば、スクロールによる表示、非表示は無効にし、スクロールを検知してナビを閉じる機能だけ使いたい場合は以下のようにしてください。

  <!--　スクロールによる自動閉　-->
  <script>
  var startPos = 0,winScrollTop = 0;
  $(window).on('scroll',function(){
    winScrollTop = $(this).scrollTop();
    if (winScrollTop >= startPos) {
      //下にスクロール
      $('#navigation-button').removeAttr('checked').prop('checked', false).change(); //ナビを閉じる
    }
    else {
      //上スクロール
      $('#navigation-button').removeAttr('checked').prop('checked', false).change(); //ナビを閉じる
    }
    startPos = winScrollTop;
  });
  </script>