【jQuery】スクロールして上からスルッとスライドで出てくるヘッダーの作り方

スクロールしたら上からヘッダーが降りてくるようにしたいけど、どうやるの？

今回実装したいのは、こちらになります。

最初に表示されているヘッダーは固定されていない
スクロールすると最初のヘッダーはそのまま上に消える
スクロールを続けると、上からスライドするように固定ヘッダーが表示
スクロールを上にして戻すと、固定ヘッダーは上にスライドするように消えて、最初のヘッダーが表示

それでは、解説していきます。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

30日間でWeb制作を学べる
完全無料
現役エンジニアへの質問無制限
オンラインの動画学習なので時間場所を問わず勉強可能
最大4回の学習サポート面談
受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼完全無料／

ZeroPlus Gate公式サイト

先着1日25名まで！

スクロールして上からスルッとスライドで出てくるヘッダーの実装方法

今回はjQueryを使うので、jQueryを使ったことがない人は、まずは以下の記事を参照下さい。

: 【初心者向け】jQueryとは？CDNを使った本体の読み込み方も分かりやすく解説
続きを見る

早速コードを解説していきます。

HTML

<header class="header">
  <!-- 初期表示のヘッダー -->
  <nav class="header-nav">
    <ul class="header-list">
      <li class="header-item"><a href="#anchor01">HOME</a></li>
      <li class="header-item"><a href="#anchor02">ABOUT</a></li>
      <li class="header-item"><a href="#anchor03">SHOP</a></li>
      <li class="header-item"><a href="#anchor04">NEWS</a></li>
    </ul>
  </nav>
  <!-- スクロールしたら表示されるヘッダー -->
  <nav class="header-navFixed" id="js-header">
    <ul class="header-list">
      <li class="header-item"><a href="#anchor01">HOME</a></li>
      <li class="header-item"><a href="#anchor02">ABOUT</a></li>
      <li class="header-item"><a href="#anchor03">SHOP</a></li>
      <li class="header-item"><a href="#anchor04">NEWS</a></li>
    </ul>
  </nav>
</header>
<!-- メインコンテンツ -->
<main>
  <section class="section01" id="anchor01">
    <h2 class="section-title">HOME</h2>
  </section>
  〜中略〜
</main>

最初から表示されているヘッダーと、スクロールして上から出てくるヘッダーは分けて書いています。

一緒にしても今回と同じような実装はできますが、そうするとガクついたりtransitionが効かなかったりするので、分けています。

ポイントは2点です。

スクロールしてから表示される方のnavタグには、jQueryで使うためのid="js-header"を書く
スクロールしてから表示される方のnavタグには、最初から表示されているヘッダーとは別のclass名を付ける

CSS

/* スムーズスクロールとヘッダーのスタイル */
html {
  scroll-behavior: smooth; /* スムーズスクロールを有効化 */
  scroll-padding-top: 70px; /* ヘッダーの高さ */
}

/* ヘッダー部分のスタイル */
.header {
  background-color: #ff9393; /* 背景色 */
  color: #fff; /* テキスト色 */
  width: 100%; /* 幅を100%に */
}

/* 固定ヘッダーのスタイル */
.header-navFixed {
  background-color: #8484ff; /* 背景色 */
  color: #fff; /* テキスト色 */
  position: fixed; /* 固定 */
  top: -70px; /* ヘッダーの高さ分上にする(隠す) */
  transition: top .5s; /* アニメーション効果を追加 */
  width: 100%; /* 幅を100%に */
}

/* 固定ヘッダーが表示されたときのスタイル */
#js-header.is-show {
  top: 0; /* 隠していたヘッダーを表示 */
}

/* ヘッダーリストのスタイル */
.header-list {
  align-items: center; /* 垂直方向中央揃え */
  display: flex; /* 横並びに配置 */
  height: 70px; /* ヘッダーの高さ */
  justify-content: center; /* 左右中央寄せ */
}

/* ヘッダーアイテムのスタイル */
.header-item a {
  color: #fff; /* テキスト色 */
  padding: 10px; /* 内側の余白 */
  text-decoration: none; /* デフォルトの下線を消す */
}

CSSのポイントは以下になります。

.header-navFixedのtop: -70px;で固定ヘッダーを隠しておく（数値はヘッダーの高さ）
.header-navFixedのtransition: top .5s;でスライドするような動き
#js-header.is-showのtop: 0;で隠している固定ヘッダーを表示

あとはほとんどヘッダーのスタイルなので、自由に編集して下さい。

また、scroll-padding-top: 70px;は、ページ内スクロールによるスクロール位置のズレを修正するコードです。

これにより、ページ内スクロールの遷移先がセクションの上にピッタリ来るようになります。

それについては、以下の記事を参照下さい。

jQuery

$(function () {
  // 固定ヘッダー要素をjQueryオブジェクトとして取得
  const $fixed = $("#js-header");
  // ウィンドウのスクロールイベントを監視
  $(window).scroll(function () {
    // スクロール位置が200pxを超えたら
    if ($(this).scrollTop() > 200) {
      // 固定ヘッダーにis-showクラスを追加して表示
      $fixed.addClass("is-show");
    } else {
      // スクロール位置が200px以下ならis-showクラスを削除して非表示
      $fixed.removeClass("is-show");
    }
  });
});

id名やclass名は任意です。

ポイントは『どのくらいスクロールしたら固定ヘッダーを表示するか』となり、ここでは200pxに設定しています。

デモ

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

JavaScriptの場合

今回はjQueryを使う方法を解説しましたが、JavaScriptでも出来ます。

先ほどのjQueryをこちらに変えます。

document.addEventListener("DOMContentLoaded", function() {
  // 固定ヘッダー要素を取得
  const fixed = document.getElementById("js-header");
  // ウィンドウのスクロールイベントを監視
  window.addEventListener("scroll", function() {
    // スクロール位置が200pxを超えたら
    if (window.scrollY > 200) {
      // 固定ヘッダーにis-showクラスを追加して表示
      fixed.classList.add("is-show");
    } else {
      // スクロール位置が200px以下ならis-showクラスを削除して非表示
      fixed.classList.remove("is-show");
    }
  });
});

デモはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.