【jQuery】下にスクロールで消えて上にスクロールで表示するヘッダーの作り方

下にスクロールしたらヘッダーを隠して、上にスクロールしたらヘッダーを表示することってできる？

ページをスクロールして読んでいると、ヘッダーが邪魔だと思ったことありませんか？

そんな時は、下にスクロールしている時はヘッダーを上に引っ込ませて、上にスクロールしてページを戻っている時だけヘッダーを表示するということができます。

今回は、jQueryを使った方法を解説していきます。

じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！

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

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

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

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇‍♂️）

＼完全無料／

ZeroPlus Gate公式サイト

毎日先着制！

下にスクロールで消えて上にスクロールで表示するヘッダーの作り方

今回は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>
</header>
<!-- メインコンテンツ -->
<main>
  <section class="section01" id="anchor01">
    <h2 class="section-title">HOME</h2>
  </section>
  〜中略〜
</main>

HTMLは特に変わった点はありません。

CSS

/* スムーズスクロールとヘッダーのスタイル */
html {
  scroll-behavior: smooth; /* スムーズスクロールを有効化 */
}
/* ヘッダー部分のスタイル */
.header {
  background-color: #ff9393; /* 背景色 */
  color: #fff; /* テキスト色 */
  position: fixed; /* 固定 */
  top: 0; /* 上からの位置 */
  transition: top .5s; /* アニメーション効果を追加 */
  width: 100%; /* 幅を100%に */
}
/* ヘッダーリストのスタイル */
.header-list {
  align-items: center; /* 垂直方向中央揃え */
  display: flex; /* 横並びに配置 */
  height: 70px; /* ヘッダーの高さ */
  justify-content: center; /* 左右中央寄せ */
}
/* ヘッダーアイテムのスタイル */
.header-item a {
  color: #fff; /* テキスト色 */
  padding: 10px; /* 内側の余白 */
  text-decoration: none; /* デフォルトの下線を消す */
}

CSSので重要なのはこちらです。

/* ヘッダー部分のスタイル */
.header {
  position: fixed; /* 固定 */
  top: 0; /* 上からの位置 */
  transition: top .5s; /* アニメーション効果を追加 */
}

ヘッダーは常に固定した状態です。

あとは上からスルッとスライドするように、transition: top .5s;でアニメーションにしています。

jQuery

$(document).ready(function () {
  // ウィンドウのスクロール量を保持する変数
  let start_position = 0,
    window_position;
  // ヘッダー要素を取得
  const header = $("header");
  // スクロールイベントを設定
  $(window).scroll(function () {
    // 現在のウィンドウのスクロール量を取得
    window_position = $(window).scrollTop();
    // ヘッダーの高さを取得
    const headerHeight = header.outerHeight();
    // スクロール量が初期位置より小さい場合、上にスクロールしているのでヘッダーを表示
    if (window_position <= start_position) {
      header.css("top", "0");
    } else {
      // スクロール量が初期位置より大きい場合、下にスクロールしているのでヘッダーを非表示
      header.css("top", -headerHeight + "px");
    }
    // 現在の位置を更新
    start_position = window_position;
  });
  // ページ読み込み時に中途半端な位置でロードされたときでも正しくヘッダーの表示を設定するためにスクロールイベントを発生させる
  $(window).trigger("scroll");
});

これはヘッダーの高さを取得して、その分を上に移動してヘッダーを隠している形になります。

今回の場合、ヘッダーの高さは70pxなので、top: -70px;になります。

また、ヘッダーの高さが変わっても問題ありません。

なので、コードはこのまま何もいじらなくてOKです。

デモ

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

JavaScriptの場合

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

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

// ウィンドウのスクロール量を保持する変数
let start_position = 0,
  window_position;
// ヘッダー要素を取得
const header = document.querySelector("header");
// スクロールイベントを設定
window.addEventListener("scroll", function () {
  // 現在のウィンドウのスクロール量を取得
  window_position = window.scrollY;
  // ヘッダーの高さを自動で取得
  const headerHeight = header.offsetHeight;
  // スクロール量が初期位置より小さい場合、上にスクロールしているのでヘッダーを表示
  if (window_position <= start_position) {
    header.style.top = "0";
  } else {
    // スクロール量が初期位置より大きい場合、下にスクロールしているのでヘッダーを非表示
    header.style.top = -headerHeight + "px";
  }
  // 現在の位置を更新
  start_position = window_position;
});
// ページ読み込み時に中途半端な位置でロードされたときでも正しくヘッダーの表示を設定するためにスクロールイベントを発生させる
window.dispatchEvent(new Event("scroll"));

デモはこちら。

See the Pen
下にスクロールで消えて上にスクロールで表示するヘッダー（JavaScript） by junpei (@junpei-sugiyama)
on CodePen.