スクロールで透明 → 単色化するナビ
ファーストビューでは透明、少しスクロールすると白背景にスナップ切り替わるヘッダーです。仕組みはシンプルで、JavaScript が scroll イベントで window.scrollY を監視し、50px を超えたら is-scrolled クラスを付け外しするだけ。
解説
ファーストビューでは透明、少しスクロールすると白背景にスナップ切り替わるヘッダーです。仕組みはシンプルで、JavaScript が scroll イベントで window.scrollY を監視し、50px を超えたら is-scrolled クラスを付け外しするだけ。見た目の変化はすべて CSS 側に持たせており、transition で背景・影・パディング・文字色がなめらかに切り替わります。ヘッダーは position: fixed で常に最前面に固定されています。
使いどころ
- ヒーローに大きな写真や動画を敷き、その上にロゴを溶け込ませたい LP
- トップだけ没入感を出し、読み進めると実用的な白ナビに変えたいサイト
- 透過ロゴと白ロゴを切り替えたいブランドサイト
切り替わる位置は JS の 50 という数値を変えるだけで調整できます。透明時の文字色は白前提なので、暗い写真など 背景とのコントラスト を確保してください。スクロール毎にイベントが走るので、処理が重い場合は requestAnimationFrame でまびくと滑らかです。クラスの付与は条件で切り替えるだけなので、色や影は CSS を編集すれば自由に変えられます。
使用例・適したシーン
- コーポレートサイトのグローバルナビ
- EC サイトのヘッダー
- SaaS の管理画面
- モバイル向け Web アプリ
よくある質問
ナビが切り替わるスクロール量を変えたいです。
JavaScript で「スクロール量が一定値（50px）を超えたら切り替える」と判定しています。この 50 という数値を変更すると、背景が切り替わるタイミングを調整できます。
JavaScript は必須ですか？
はい。スクロール量に応じてクラスを付け外しする部分は JavaScript が担当しています。背景や文字色の変化自体は CSS の transition で行いますが、いつ切り替えるかの判定に scroll イベントの監視が必要です。CSS だけで透明から単色へ切り替えることはできません。