スティッキー + すりガラスナビ
上部に張り付き、背景は backdrop-filter で半透明にぼかすモダンなヘッダーナビ。Apple / Stripe で見るおしゃれな実装。
解説
画面上部に貼り付いたまま追従するヘッダーナビです。位置の固定は position: sticky; top: 0 で実現し、背景には backdrop-filter: blur(16px) saturate(180%) を当てて、スクロールで下の内容がナビ越しに透けてぼける、すりガラス調の見た目にしています。背景色は rgba(255,255,255,.85) の半透明白で、下端に薄いボーダーを入れてコンテンツとの境目を示します。ロゴ・メニュー・CTA ボタンは flex で横並びにし、margin-left:auto でメニューを右側に寄せています。
使いどころ
- 常にメニューへ手が届くようにしたいコーポレートサイトや LP
- 白背景の上を流れる、写真の多いページのヘッダー
- Apple や Stripe のような、軽やかで上品な印象を出したいサイト
カスタマイズは、背景の透明度とぼかし量、下端ボーダーの濃さで透け感を調整します。z-index はモーダルやドロップダウンより低くなりすぎないよう注意してください。backdrop-filter 非対応環境では 不透明寄りの背景色 にフォールバックすると読みやすさを保てます。ナビが常に画面を占有するため、高さは抑えめにし、本文側に scroll-margin-top を足すとアンカー遷移時に見出しがナビに隠れません。
使用例・適したシーン
- コーポレートサイトのグローバルナビ
- EC サイトのヘッダー
- SaaS の管理画面
- モバイル向け Web アプリ
よくある質問
sticky と fixed はどう違いますか？
このナビは position: sticky を使っています。sticky は通常の流れの中に置かれ、スクロールで指定位置（top:0）に達すると貼り付く方式で、レイアウトの場所を確保したまま追従します。fixed は最初から画面に固定され流れから外れるため、別途その高さ分の余白調整が必要になります。常時上部に出したい一般的なヘッダーなら sticky が扱いやすいです。
アンカーリンクで飛ぶと見出しがナビに隠れます。
固定ヘッダーの高さ分だけ着地位置が上にずれるためです。飛び先の見出しやセクションに scroll-margin-top をナビの高さと同じくらい指定すると、見出しがナビの下に隠れず正しい位置で止まります。