スクロールで縮小するスティッキーヘッダー
スクロール量に応じて高さを縮めるスティッキーヘッダーです。ヘッダー自体は position:sticky;top:0 で画面上部に固定し、JavaScript で window.scrollY が 60px を超えたら shs--shrunk クラスを付け外しします。
解説
スクロール量に応じて高さを縮めるスティッキーヘッダーです。ヘッダー自体は position:sticky;top:0 で画面上部に固定し、JavaScript で window.scrollY が 60px を超えたら shs--shrunk クラスを付け外しします。縮小時はパディングとロゴのフォントサイズを transition でなめらかに変化させ、影も濃くして浮き上がりを演出します。スクロールリスナーは passive:true 指定なので、ブラウザのスクロール処理をブロックしません。
使いどころ
- ファーストビューでは大きくブランドを見せ、読み進めると省スペース化したいコーポレートサイト
- ナビゲーションを常に出しつつ本文の表示領域を稼ぎたいブログやメディア
- 長いランディングページで CTA リンクへ素早く戻したい場面
切り替えのしきい値は JS の 60 を変えるだけで調整できます。色やパディングは BEM クラスの CSS 側に集約されているので、ブランドカラーへの差し替えも容易です。動きを抑えたい利用者のために、prefers-reduced-motion で transition を無効化する配慮を加えると親切です。
使用例・適したシーン
- LP の演出強化
- 記事の読了率向上
- ストーリーテリング表現
よくある質問
縮小が始まるスクロール位置を変えられますか
はい。JavaScript 内で window.scrollY を 60 と比較している数値を変えるだけです。たとえば 120 にすればもう少し下までスクロールしてから縮小が始まります。
JavaScript なしで実装できますか
高さを縮める切り替えにはスクロール量の判定が必要なため、最小限の JavaScript を使っています。固定表示だけなら CSS の position:sticky のみで実現できますが、縮小演出にはこのスクリプトが必要です。