Home
Menu
Side
Twitter
Top

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

2020/11/16

Blog Blogger QooQ

画面上部に固定したナビゲーションバーを下スクロールで消し、上スクロールで表示されるようにする方法です。

今回は例として Blogger のテンプレート QooQ のナビゲーションバーに導入してみました。

ID や Class を変更することで、違うテンプレートにも適用できると思います!

こんにちは、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>

この場合、ナビゲーションバーを上部に固定するため、CSS#navigationtopを 0 にしてください。

QooQ