下へスクロールすると隠れる固定ヘッダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

ヘッダー

下へスクロールすると隠れる固定ヘッダーを作る方法

下へスクロールすると隠れる固定ヘッダーを作る方法を紹介します。通常は画面上部に固定されているヘッダーを、ページを下へスクロールしたときだけ上方向へ隠し、上へスクロールしたときに再表示するレイアウトです。本文を読むときの表示領域を広く使えるため、記事ページやランディングページなどで使いやすい動きです。

このサンプルでは、HTML、CSS、JavaScriptを使って、スクロール方向に応じてヘッダーの表示状態を切り替えます。JavaScriptで現在のスクロール位置と前回のスクロール位置を比較し、下へ動いている場合はヘッダーへクラスを追加して非表示にします。上へスクロールするとクラスを外し、固定ヘッダーを再び表示します。

ヘッダーの高さ、背景色、文字色、余白、隠れる速度、メニュー項目などはCSSやHTMLから変更できます。スクロール中にヘッダーが邪魔になりにくいデザインを作りたい場合や、必要なときだけナビゲーションを表示したいWebサイトに活用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

デモ枠の中を下へスクロールすると、固定ヘッダーが上方向へ隠れます。
上へスクロールすると、固定ヘッダーが再び表示されます。
スクロール方向をJavaScriptで判定し、CSSクラスを付け外ししています。
ヘッダーの高さ、背景色、文字色、隠れる速度などはCSSから変更できます。
本文を広く見せたい記事ページやサービス紹介ページで使いやすい動きです。
下へ読むときはヘッダーを隠し、戻りたいときに表示できる構成です。
デモ枠の中を下へスクロールするとヘッダーが隠れ、上へスクロールすると再表示されます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- 表示幅を端末に合わせる -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>下へスクロールすると隠れる固定ヘッダー</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- 下へスクロールすると隠れる固定ヘッダー -->
  <header class="hide-on-scroll-header_header" id="hide-on-scroll-header">

    <!-- サイト名 -->
    <a class="hide-on-scroll-header_logo" href="#">
      Sample Site
    </a>

    <!-- ナビメニュー -->
    <nav class="hide-on-scroll-header_nav" aria-label="メニュー">
      <a href="#">ホーム</a>
      <a href="#">サービス</a>
      <a href="#">料金</a>
      <a href="#">ブログ</a>
    </nav>

  </header>

  <!-- スクロール確認用の本文 -->
  <main class="hide-on-scroll-header_main">

    <section class="hide-on-scroll-header_section">
      <h1>下へスクロールすると隠れる固定ヘッダー</h1>
      <p>
        ページを下へスクロールするとヘッダーが隠れ、上へスクロールすると再び表示されます。
      </p>
    </section>

    <section class="hide-on-scroll-header_section">
      <h2>セクション1</h2>
      <p>
        スクロール方向をJavaScriptで判定し、ヘッダーの表示状態を切り替えます。
      </p>
    </section>

    <section class="hide-on-scroll-header_section">
      <h2>セクション2</h2>
      <p>
        下へ読むときはヘッダーを隠せるため、本文を広く見せられます。
      </p>
    </section>

    <section class="hide-on-scroll-header_section">
      <h2>セクション3</h2>
      <p>
        上へ戻る操作をしたときは、ヘッダーを再表示してナビゲーションへアクセスしやすくします。
      </p>
    </section>

    <section class="hide-on-scroll-header_section">
      <h2>セクション4</h2>
      <p>
        ヘッダーの高さ、背景色、文字色、隠れる速度などはCSSから変更できます。
      </p>
    </section>

    <section class="hide-on-scroll-header_section">
      <h2>セクション5</h2>
      <p>
        記事ページやサービス紹介ページなど、スクロール量が多いページで使いやすい動きです。
      </p>
    </section>

    <section class="hide-on-scroll-header_section">
      <h2>セクション6</h2>
      <p>
        本文量が多いページで確認すると、下へスクロールしたときにヘッダーが隠れる動きが分かりやすくなります。
      </p>
    </section>

  </main>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

ファイル構成と設置方法

このサンプルはHTMLファイル、CSSファイル、JavaScriptファイルの3つで構成されています。HTMLファイルに固定ヘッダーと本文を記述し、CSSファイルで固定表示やアニメーション、レイアウトを設定します。JavaScriptファイルではスクロール方向を判定し、下へスクロールしたときはヘッダーを隠し、上へスクロールしたときに再表示する処理を行います。 

sample/
├── index.html
├── style.css
└── script.js

ファイルを配置したらindex.htmlをブラウザで開いて動作を確認します。ページを下へスクロールすると固定ヘッダーが上方向へ隠れ、上へスクロールすると再表示されます。サイト名やメニュー項目はHTMLから変更でき、ヘッダーの高さ、背景色、文字色、アニメーション速度などはstyle.cssから調整できます。

コメント