スクロールすると小さくなる固定ヘッダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

ヘッダー

スクロールすると小さくなる固定ヘッダーを作る方法

スクロールすると小さくなる固定ヘッダーを作る方法を紹介します。ページ上部に固定されたヘッダーは、スクロール量が増えると高さや余白が小さくなり、画面を広く使えるようになります。ナビゲーションは常に表示したまま、本文をより見やすくしたいWebサイトでよく使われるデザインです。

このサンプルでは、HTML、CSS、JavaScriptを使って、スクロール位置に応じてヘッダーのサイズを切り替えます。ページを開いた直後は余裕のある大きめのヘッダーを表示し、少しスクロールするとJavaScriptでクラスを追加して高さや余白を変更します。一番上へ戻ると元のサイズへ戻るため、自然なアニメーションで切り替わります。

ブログ、サービスサイト、コーポレートサイト、ランディングページなど、スクロール量の多いページで使いやすい実装です。ヘッダーの高さ、上下の余白、文字サイズ、背景色、アニメーション速度などはCSSから調整できます。固定ヘッダーを目立たせつつ、スクロール中はコンテンツの表示領域を少しでも広く確保したい場合に便利です。

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

デモ

Sample Site お問い合わせ
このデモ枠の中を下へスクロールしてください。
スクロールすると、固定ヘッダーの高さが小さくなります。
一番上へ戻ると、ヘッダーは元の大きさに戻ります。
ヘッダーを表示したまま、本文の表示領域を少し広く見せたい場合に使いやすい動きです。
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="scroll-shrink-header_header" id="scroll-shrink-header">

    <!-- サイト名 -->
    <a class="scroll-shrink-header_site-name" href="#">
      Sample Site
    </a>

    <!-- ナビメニュー -->
    <nav class="scroll-shrink-header_nav" aria-label="メニュー">
      <a href="#">ホーム</a>
      <a href="#">サービス</a>
      <a href="#">料金</a>
      <a href="#">会社情報</a>
    </nav>

    <!-- お問い合わせリンク -->
    <a class="scroll-shrink-header_contact" href="#">
      お問い合わせ
    </a>

  </header>

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

    <section class="scroll-shrink-header_section">
      <h1>スクロールすると小さくなる固定ヘッダー</h1>
      <p>
        ページを下へスクロールすると、固定ヘッダーの高さや文字サイズが小さくなります。
      </p>
    </section>

    <section class="scroll-shrink-header_section">
      <h2>セクション1</h2>
      <p>
        一番上では大きめのヘッダーとして表示されます。
      </p>
    </section>

    <section class="scroll-shrink-header_section">
      <h2>セクション2</h2>
      <p>
        少しでもスクロールするとJavaScriptでクラスを追加し、ヘッダーを小さくします。
      </p>
    </section>

    <section class="scroll-shrink-header_section">
      <h2>セクション3</h2>
      <p>
        一番上へ戻ると追加したクラスを外し、ヘッダーを元の大きさへ戻します。
      </p>
    </section>

    <section class="scroll-shrink-header_section">
      <h2>セクション4</h2>
      <p>
        ヘッダーを固定したまま小さくすることで、本文の表示領域を広く見せられます。
      </p>
    </section>

    <section class="scroll-shrink-header_section">
      <h2>セクション5</h2>
      <p>
        ヘッダーの高さ、余白、文字サイズ、切り替わる速度はCSSから調整できます。
      </p>
    </section>

    <section class="scroll-shrink-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をブラウザで開き、ページを下へスクロールすると固定ヘッダーが小さく表示されます。一番上へ戻ると元の大きさへ戻ります。ヘッダーの高さ、上下や左右の余白、文字サイズ、アニメーション速度、背景色などはstyle.cssから調整できます。

コメント