固定ヘッダーとは

ページを下にスクロールしても、画面の上部に張り付いたまま残り続けるヘッダー。

概要

通常はページと一緒にスクロールして画面外へ消えてしまうヘッダーを、画面の上部に張り付けたまま残す実装です。どこまでスクロールしても、常にロゴやナビゲーションにアクセスできるのが利点です。スクロールした量に応じて、影を付けるなど見た目を少し変えることもあります。

別名

表記ゆれ：スティッキーヘッダー、追従ヘッダー、fixed ヘッダー、sticky header

CSS のプロパティ名（position: sticky / position: fixed）に由来して「スティッキーヘッダー」「fixed ヘッダー」とも呼ばれます。厳密には実装方法が異なりますが、見た目の挙動を指して同じ意味で使われることが多いです。

AI への伝え方

「固定ヘッダーにして」「スクロールしてもヘッダーを上に残して」で通じます。スクロールしたときに影を付けるなど見た目を変えたい場合は、その仕様も併せて伝えます。

似たパーツとの違い

固定ヘッダーは画面の上端に張り付くのに対し、「追従サイドバー」は縦方向のコンテンツに合わせてサイドに張り付くという違いがあります。

デモ

コード

HTML

<div class="sticky-header-demo">
  <header class="sticky-header-demo__header">
    <span class="sticky-header-demo__logo">Sample Site</span>
    <nav class="sticky-header-demo__nav" aria-label="サンプルメニュー">
      <a href="#">サービス</a>
      <a href="#">実績</a>
      <a href="#">お問い合わせ</a>
    </nav>
  </header>
  <main class="sticky-header-demo__body">
    <p>下にスクロールしてみてください。ヘッダーが画面の上部に固定されたまま残ります。</p>
    <p>これはダミーの本文です。固定ヘッダーの挙動を確認するために、長さを確保しています。</p>
    <p>スクロールを続けると、ヘッダーに少し影が付いて、固定されていることがより分かりやすくなります。</p>
    <p>さらにスクロールを続けても、ヘッダーは画面の外に消えず、常に同じ位置に留まります。</p>
    <p>ロゴやメニューに、いつでもすぐアクセスできるのが固定ヘッダーの利点です。</p>
    <p>長い記事やページでも、読者はスクロールをやめてメニューを探す必要がありません。</p>
    <p>下までスクロールすると、このダミー本文はここで終わりです。</p>
  </main>
</div>

CSS

.sticky-header-demo {
  font-family: sans-serif;
  margin: -24px;
}

.sticky-header-demo__header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: #fff;
  border-bottom: 1px solid #ddd;
  z-index: 10;
  transition: box-shadow 0.15s ease;
}

.sticky-header-demo__header--scrolled {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.sticky-header-demo__logo {
  font-weight: bold;
}

.sticky-header-demo__nav {
  display: flex;
  gap: 16px;
}

.sticky-header-demo__nav a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
}

.sticky-header-demo__nav a:hover {
  color: #0017c1;
}

.sticky-header-demo__body {
  padding: 24px;
  color: #333;
  line-height: 1.8;
  min-height: 1400px;
}

.sticky-header-demo__body p {
  margin: 0 0 16px;
}

const header = document.querySelector(".sticky-header-demo__header");

window.addEventListener("scroll", () => {
  header.classList.toggle("sticky-header-demo__header--scrolled", window.scrollY > 8);
});