固定ヘッダー Sticky Header

スクロールしても画面上部に固定表示されるヘッダー。常にナビゲーションにアクセス可能。

使用場面: 長いページでヘッダーナビゲーションを常に表示したい場合 採用例: Slack, Notion

ライブデモ

セクション 1

固定ヘッダーはスクロールしても画面上部に固定されます。長いコンテンツをスクロールして、ヘッダーが固定されることを確認してください。ユーザーはどの位置にいてもナビゲーションにアクセスできます。

セクション 2

セクション 3

セクション 4

セクション 5

セクション 6

セクション 7

セクション 8

セクション 9

セクション 10

セクション 11

セクション 12

ソースコード

<div class="demo-sticky-container">
  <header class="demo-sticky-header">
    <span class="demo-sticky-logo">MySite</span>
    <nav class="demo-sticky-nav">
      <a href="#">ホーム</a>
      <a href="#">機能</a>
      <a href="#">料金</a>
    </nav>
  </header>
  <div class="demo-sticky-content"><div style="margin-bottom:16px;"><h3 style="font-size:15px;font-weight:700;color:var(--ui-primary);margin:0 0 6px;">セクション 1</h3><p style="font-size:13px;color:#555;line-height:1.6;margin:0;">固定ヘッダーはスクロールしても画面上部に固定されます。長いコンテンツをスクロールして、ヘッダーが固定されることを確認してください。ユーザーはどの位置にいてもナビゲーションにアクセスできます。</p></div><div style="margin-bottom:16px;"><h3 style="font-size:15px;font-weight:700;color:var(--ui-primary);margin:0 0 6px;">セクション 2</h3><p style="font-size:13px;color:#555;line-height:1.6;margin:0;">固定ヘッダーはスクロールしても画面上部に固定されます。長いコンテンツをスクロールして、ヘッダーが固定されることを確認してください。ユーザーはどの位置にいてもナビゲーションにアクセスできます。</p></div><div style="margin-bottom:16px;"><h3 style="font-size:15px;font-weight:700;color:var(--ui-primary);margin:0 0 6px;">セクション 3</h3><p style="font-size:13px;color:#555;line-height:1.6;margin:0;">固定ヘッダーはスクロールしても画面上部に固定されます。長いコンテンツをスクロールして、ヘッダーが固定されることを確認してください。ユーザーはどの位置にいてもナビゲーションにアクセスできます。</p></div><div style="margin-bottom:16px;"><h3 style="font-size:15px;font-weight:700;color:var(--ui-primary);margin:0 0 6px;">セクション 4</h3><p style="font-size:13px;color:#555;line-height:1.6;margin:0;">固定ヘッダーはスクロールしても画面上部に固定されます。長いコンテンツをスクロールして、ヘッダーが固定されることを確認してください。ユーザーはどの位置にいてもナビゲーションにアクセスできます。</p></div><div style="margin-bottom:16px;"><h3 style="font-size:15px;font-weight:700;color:var(--ui-primary);margin:0 0 6px;">セクション 5</h3><p style="font-size:13px;color:#555;line-height:1.6;margin:0;">固定ヘッダーはスクロールしても画面上部に固定されます。長いコンテンツをスクロールして、ヘッダーが固定されることを確認してください。ユーザーはどの位置にいてもナビゲーションにアクセスできます。</p></div><div style="margin-bottom:16px;"><h3 style="font-size:15px;font-weight:700;color:var(--ui-primary);margin:0 0 6px;">セクション 6</h3><p style="font-size:13px;color:#555;line-height:1.6;margin:0;">固定ヘッダーはスクロールしても画面上部に固定されます。長いコンテンツをスクロールして、ヘッダーが固定されることを確認してください。ユーザーはどの位置にいてもナビゲーションにアクセスできます。</p></div><div style="margin-bottom:16px;"><h3 style="font-size:15px;font-weight:700;color:var(--ui-primary);margin:0 0 6px;">セクション 7</h3><p style="font-size:13px;color:#555;line-height:1.6;margin:0;">固定ヘッダーはスクロールしても画面上部に固定されます。長いコンテンツをスクロールして、ヘッダーが固定されることを確認してください。ユーザーはどの位置にいてもナビゲーションにアクセスできます。</p></div><div style="margin-bottom:16px;"><h3 style="font-size:15px;font-weight:700;color:var(--ui-primary);margin:0 0 6px;">セクション 8</h3><p style="font-size:13px;color:#555;line-height:1.6;margin:0;">固定ヘッダーはスクロールしても画面上部に固定されます。長いコンテンツをスクロールして、ヘッダーが固定されることを確認してください。ユーザーはどの位置にいてもナビゲーションにアクセスできます。</p></div><div style="margin-bottom:16px;"><h3 style="font-size:15px;font-weight:700;color:var(--ui-primary);margin:0 0 6px;">セクション 9</h3><p style="font-size:13px;color:#555;line-height:1.6;margin:0;">固定ヘッダーはスクロールしても画面上部に固定されます。長いコンテンツをスクロールして、ヘッダーが固定されることを確認してください。ユーザーはどの位置にいてもナビゲーションにアクセスできます。</p></div><div style="margin-bottom:16px;"><h3 style="font-size:15px;font-weight:700;color:var(--ui-primary);margin:0 0 6px;">セクション 10</h3><p style="font-size:13px;color:#555;line-height:1.6;margin:0;">固定ヘッダーはスクロールしても画面上部に固定されます。長いコンテンツをスクロールして、ヘッダーが固定されることを確認してください。ユーザーはどの位置にいてもナビゲーションにアクセスできます。</p></div><div style="margin-bottom:16px;"><h3 style="font-size:15px;font-weight:700;color:var(--ui-primary);margin:0 0 6px;">セクション 11</h3><p style="font-size:13px;color:#555;line-height:1.6;margin:0;">固定ヘッダーはスクロールしても画面上部に固定されます。長いコンテンツをスクロールして、ヘッダーが固定されることを確認してください。ユーザーはどの位置にいてもナビゲーションにアクセスできます。</p></div><div style="margin-bottom:16px;"><h3 style="font-size:15px;font-weight:700;color:var(--ui-primary);margin:0 0 6px;">セクション 12</h3><p style="font-size:13px;color:#555;line-height:1.6;margin:0;">固定ヘッダーはスクロールしても画面上部に固定されます。長いコンテンツをスクロールして、ヘッダーが固定されることを確認してください。ユーザーはどの位置にいてもナビゲーションにアクセスできます。</p></div></div>
</div>

.demo-sticky-container { min-height: 350px;
  height: 200px; overflow-y: auto; border: 1px solid #e5e7eb;
  border-radius: 8px; position: relative;
}
.demo-sticky-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--ui-primary); color: #fff;
}
.demo-sticky-logo { font-weight: 700; font-size: 16px; }
.demo-sticky-nav { display: flex; gap: 16px; }
.demo-sticky-nav a { color: rgba(255,255,255,0.85); text-decoration: none; font-size: 14px; }
.demo-sticky-nav a:hover { color: #fff; }
.demo-sticky-content { padding: 20px; }
.demo-sticky-content p { margin-bottom: 16px; font-size: 14px; color: #555; line-height: 1.7; }

AIプロンプト

固定ヘッダーをHTML/CSSで作ってください。スクロールしても画面上部にヘッダーが固定表示されます。

以下の仕様で固定ヘッダーを実装してください。
- スクロール時にヘッダーの高さが縮小するアニメーション
- プライマリカラー: #2563eb
- 下にスクロールで非表示、上にスクロールで再表示
- ヘッダーに影を追加（スクロール時のみ）
- ロゴ + ナビリンク + CTAボタン

パフォーマンス最適化された固定ヘッダーを実装してください。
- IntersectionObserver を使用してスクロール検知（scroll イベントではなく）
- スクロール方向の判定（上下）
- will-change と transform でGPUアクセラレーション
- prefers-reduced-motion対応
- 透明 → 不透明のトランジション（ヒーロー直下で切り替わる）
- モバイルではハンバーガーメニューに自動切替
- レイアウトシフト防止（ヘッダー高さ分のスペーサー）

← カタログに戻る