スクロールすると消え、上に戻すと再表示されるナビゲーションの簡単な実装方法

本記事では、一定距離スクロールするとヘッダーが消え、上に少しスクロールを戻すとヘッダーが再表示されるグローバルナビゲーションを簡単に設置する方法を紹介します。この実装はjQueryとJavaScriptを使用し、スマホ画面ではトグルボタンでナビゲーションの表示／非表示を切り替えます。

Webデザインにおけるナビゲーションの最適化やスクロールに応じたダイナミックなヘッダーの実装に役立つ情報が提供されています。ブログのカスタマイズに挑戦したい方にとって有益な情報となれば幸いです。

丘に立って地球儀を持つ女性 — https://unsplash.com/@glenncarstenspeters

デモページ
ライブラリのCDN
- jQuery
ソースコード
おさらい
- コードのまとめ
おわりに

デモページ

デモページを見る

ライブラリのCDN

以下のscriptタグをheadなどに配置することによってそれぞれのライブラリが利用可能になります。先ずはこれらのコードを、この後に紹介するスクリプトコードより手前に設置します。

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

外部ライブラリのCDN（Content Delivery Network）を配置する場所は、通常、<head>セクション内の<script>要素の直前に配置することが一般的です。これは、ページが読み込まれる前にライブラリが利用可能であることを確保するためです。

ソースコード

HTML -> CSS -> JavaScriptの順に紹介します。

HTMLの構造

大きく2つのコンテナに分かれます。

「div.openbtn1」: ナビの表示／非表示を切り替えるボタン部分（スマホのみ）
「section.main-navi」: ナビゲーション部分のコンテナ

<!-- トグルボタン部分（スマホ画面のみ） -->
<div class="openbtn1">
  <span></span><span></span><span></span>
</div>
<!-- ナビゲーション部分 -->
<section class="main-navi">
  <header id="header" class="DownMove">タイトル、ロゴ
    <nav>
      <ul id="g-navi">
        <li><a href="#">見出し１</a></li>
        <li><a href="#">見出し２</a></li>
        <li><a href="#">見出し３</a></li>
        <li><a href="#">見出し４</a></li>
      </ul>
    </nav>
  </header>
</section>

<li><a href="#">~</a></li>の部分に見出しタイトルとページ内リンクを記述します。

ナビと見出しをリンクさせる方法

<!-- ナビ側 -->
<li>
  <a href="#見出し１">ここは何でもいい</a>
</li>

<!-- 見出し側 -->
<h2 id="見出し１">同じでなくてもいい</i></h2>

というように、

ナビ側で指定するhref=""の"から"内の文字と
見出し側のid=""の"から"内の文字

を一致させ、「href=""」の方には文頭に「#」を付けます。

CSSスタイル

コードはこちら（GitHubサイトへ）

コードの解説

このCSSコードはメディアクエリでデスクトップとスマートフォン画面のスタイリング・アニメーションを区分けしています。メディアクエリに関しては、SEOタイムズさんの記事で詳しく説明されているので、参考にして下さい。

find-a.jp

以下にコードの主な構成要素を解説します。

デスクトップ用スタイル

（min-width: 768px以下）

解説が開きます

トグルボタンおよびヘッダースタイル:
- #header（ナビゲーション）の位置を上端に固定

 #header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0px;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgb(9, 25, 53, .9);
    color: #fff;
    text-align: center;
    padding: 20px
  }

ナビゲーションリンクスタイル:
- ナビゲーションリンクのデフォルトおよびマウスホバー時のスタイルを指定

  #g-navi a {
    color: greenyellow;
    /* ... 他のスタイルプロパティ ... */
  }

  nav ul#g-navi {
    /* ... 他のスタイルプロパティ ... */
  }

  #g-navi li a:hover {
    color: #fff
  }

スマートフォン用スタイル

（max-width: 768px以下）

解説が開きます

トグルボタンとメニュースタイル:
- トグルボタンのスタイルを指定
- トグルボタンがアクティブな場合、#g-naviが表示されるようになります。

  .openbtn1 {
    /* ... 他のスタイルプロパティ ... */
  }

  .openbtn1.active+#g-navi {
    display: block
  }

ナビゲーションメニュースタイル:
- モバイル用のナビゲーションメニューのスタイルを指定
- #g-naviはデフォルトでは非表示で、トグルボタンがアクティブな場合に表示されます。

  #g-navi {
    display: none;
    /* ... 他のスタイルプロパティ ... */
  }

  #g-navi>li>a {
    /* ... 他のスタイルプロパティ ... */
  }

  #g-navi ul {
    /* ... 他のスタイルプロパティ ... */
  }

アニメーション:
- ヘッダーのアップおよびダウンアニメーションを定義
- .UpMoveクラスが適用された#header要素に対してアップアニメーションが実行されます。

  @keyframes UpAnime {
    /* ... アップアニメーションのスタイル ... */
  }

  @keyframes DownAnime {
    /* ... ダウンアニメーションのスタイル ... */
  }

  #header.UpMove {
    animation: UpAnime .5s forwards
  }

JavaScript

このJavaScriptコードは、「jQueryライブラリ」を利用して、ウェブページ上でのトグルボタンによるメニューの表示／非表示およびスクロールに応じたヘッダーのアニメーションを制御しています。

コードはこちら（GitHubサイトへ）

コードの解説

このコードは、トグルボタンによるメニューの表示／非表示とスクロールに応じたヘッダーのアニメーションを実現しています。また、スマートフォン画面かどうかを確認し、それに応じてスクリプトの実行を切り替えています。

以下にコードの概要と主な機能を解説します。

メニューの表示／非表示の制御

解説が開きます

コードの以下の部分は、.openbtn1クラスを持つ要素がクリックされたときに実行される関数です。

#g-navi（メニュー）の表示／非表示をトグル（切り替え）して、メニュー表示時には高さを45pxに設定し、スライドダウンで表示します。非表示時には高さを0に設定し、スライドアップで非表示にします。

また、activeクラスをトグルして、ボタンの状態を示します。

$(".openbtn1").click(function() {
  if ($("#g-navi").is(":hidden")) {
    // メニューが非表示の場合
    $("#g-navi").css("height", "45px");
    $("#g-navi").slideDown();
    $("#g-navi").css("display", "flex");
    $(this).toggleClass("active");
  } else {
    // メニューが表示されている場合
    $("#g-navi").slideUp("slow");
    $(".openbtn1").removeClass("active");
    $("#g-navi").css("height", 0);
  }
});

スクロールに応じたヘッダーのアニメーション

解説が開きます

コードの以下の部分は、スクロールの向きに応じてUpMoveまたはDownMoveクラスを#headerに追加・削除し、

UpMoveクラスが適用された場合には、ヘッダーが上方向にアニメーションし、
DownMoveクラスが適用された場合は、ヘッダーが下方向にアニメーション

します。

var beforePos = 0;

function ScrollAnime() {
  var scroll = $(window).scrollTop();
  if ($(window).width() > 767) {
    if (scroll == beforePos || (1000 > scroll || 0 > scroll - beforePos)) {
      $("#header").removeClass("UpMove");
      $("#header").addClass("DownMove");
    } else {
      $("#header").removeClass("DownMove");
      $("#header").addClass("UpMove");
    }
    beforePos = scroll;
  }
}

$(window).scroll(function() {
  ScrollAnime();
});

$(window).on("load", function() {
  ScrollAnime();
});

カスタマイズのポイント

「ScrollAnime関数」
- スクロールイベントが発生するたびに呼び出される関数で、if ($(window).width() > 767)の部分でスマートフォン画面（画面幅767px以下）の場合のみスクリプトが実行するように制御しています。この数値を変更することでレスポンシブの調整ができます。
「if (scroll == beforePos || (1000 > scroll || 0 > scroll - beforePos))」
beforePos変数は前回のスクロール位置を保持します。スクロールが発生しており、かつ、現在のスクロール位置が1000pxより大きいか、スクロール位置の差が0より小さい場合に上方向のアニメーション（ナビゲーションを非表示にする）が適用されます。ここの数値（1000 > scroll）を変更することで、ページの上端からナビゲーションをどこまで表示させるかの調整ができます。