スティッキーヘッダー縮小
スティッキーヘッダー縮小は、下にスクロールするとヘッダーが薄く縮んで本文を広く見せる定番の演出です。この実装は CSS と少量の JavaScript の組み合わせです。ヘッダーは position:sticky と top:0 で画面上部に貼り付き、 transition で高さと文字サイズがなめらかに変化します…
解説
スティッキーヘッダー縮小は、下にスクロールするとヘッダーが薄く縮んで本文を広く見せる定番の演出です。この実装は CSS と少量の JavaScript の組み合わせです。ヘッダーは position:sticky と top:0 で画面上部に貼り付き、transition で高さと文字サイズがなめらかに変化します。JavaScript は scroll イベントで縦位置を見て、60pxを超えたら min クラスを付け外しするだけのシンプルな処理です。
仕組みと使いどころ
- 長いページでロゴやナビを常に表示したいとき
- 読み進めるほど本文に集中させたいメディア記事
- スクロールに反応する動きでサイトに洗練感を出したいとき
縮小後の高さは .sh.min の height、切り替わるタイミングは JavaScript の 60 という数値で調整します。scroll 監視には passive:true を付けてスクロール性能を確保しています。クラスの付け外し方式なので毎フレーム再描画せず軽快に動きます。動きを控えたい利用者には prefers-reduced-motion で transition を無効化すると配慮になります。
よくある質問
縮み始める位置を変えられますか
はい。JavaScript内でスクロール量を比較している60という数値を変えるだけです。大きくすると下まで進んでから縮み、小さくするとすぐ縮みます。
スクロールで重くなりませんか
イベントに passive:true を付けており、処理もクラスの付け外しだけなので軽量です。毎回スタイルを直接書き換えるより負荷が小さく済みます。