ヒーロー上で透明 → スクロールで白背景
ファーストビューの上では背景を透明にして写真や動画と一体化させ、ページをスクロールすると白背景に切り替わる近代的なグローバルヘッダーです。ヘッダーは position:fixed で画面上部に固定し、 transition で背景色と影をなめらかに変化させます。
このパーツの使いどころと実装ポイント
ファーストビューの上では背景を透明にして写真や動画と一体化させ、ページをスクロールすると白背景に切り替わる近代的なグローバルヘッダーです。ヘッダーは position:fixed で画面上部に固定し、transition で背景色と影をなめらかに変化させます。切り替えは is-stuck クラスの付け外しで行い、付与時に背景白・影あり・文字色を暗色へと反転させる仕組みです。
向いている場面
- 大きな写真や動画を敷くブランドサイトのトップ
- 飲食店・ホテル・建築などの世界観重視のページ
- 製品ローンチのランディングページ
透明時はロゴもナビも白文字なので、ヒーロー画像は文字が読める程度に暗さのある写真を選ぶか、上部にうっすら暗いグラデーションを重ねると視認性が保てます。
実装上の注意
クラスの切り替えには scroll イベントの監視が必要ですが、毎フレーム処理させると重くなるため IntersectionObserver でヒーロー末尾を監視する方式が軽量です。固定ヘッダーは本文の先頭に重なるので、scroll-margin-top を併用してアンカーリンクのずれを防いでください。透明状態と白状態の両方でコントラストを確認することも大切です。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
白背景に切り替わる位置はどう決めますか。
多くはヒーローセクションを過ぎたタイミングです。IntersectionObserverでヒーロー要素を監視し、画面外に出たらis-stuckを付与する方法が安定します。スクロール量の固定値で判定するより画面サイズに左右されません。
透明時にナビ文字が背景に埋もれてしまいます。
ヒーロー画像が明るいと白文字が読みづらくなります。画像の上に暗いグラデーションのオーバーレイを重ねるか、文字に薄い影を付けると改善します。明るい写真しか使えない場合は透明時も濃色文字にする選択もあります。