透過→白切替ヘッダー
「透過→白切替ヘッダー」は、ページ最上部では背景が透明で、少しスクロールすると白背景に切り替わる固定ヘッダーです。 position:fixed で常に上部へ貼り付き、スクロール量を JavaScript で監視して一定以上スクロールしたら solid クラスを付け外しします。
このパーツの使いどころと実装ポイント
「透過→白切替ヘッダー」は、ページ最上部では背景が透明で、少しスクロールすると白背景に切り替わる固定ヘッダーです。position:fixed で常に上部へ貼り付き、スクロール量を JavaScript で監視して一定以上スクロールしたら solid クラスを付け外しします。transition を効かせているため、背景色とロゴ・メニューの文字色がなめらかに変化します。
向いている場面
大きなキービジュアルや動画を上部に置くブランドサイト、ホテルや飲食店、ポートフォリオなど、ファーストビューの世界観を邪魔せずナビゲーションを残したい場面に向きます。透過状態で写真に重ね、読みづらくなる前に白へ切り替えるのが要点です。
カスタマイズと注意点
- 切り替わるスクロール量はスクリプト内のしきい値で調整します。透過時の文字色は背景写真とのコントラストを確認してください。
- 白背景に切り替わったあとの文字色も用意しておかないと、白地に白文字で読めなくなります。
position:fixedはヘッダー分の高さを占有しないため、直下のコンテンツが隠れないよう余白を取るか開始位置に注意します。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
ヘッダーが白に切り替わるタイミングを変えられますか？
スクロール量を判定しているJavaScriptのしきい値を変更します。数値を大きくするとより下までスクロールしてから白に変わり、小さくすると早めに切り替わります。
透過状態で文字が読みにくいときの対処は？
ファーストビューの背景が明るい場合は透過時の文字色を濃い色にするか、ヘッダーにうっすら影や半透明の下地を敷くと読みやすくなります。背景写真とのコントラスト確認が重要です。