§16-07Motion
Sticky header / shrink on scroll
スクロールするとヘッダーが縮んで上部に留まる。
ナビゲーションを常に手元に置きつつ、読み進めるときは本文の面積を確保できる。長い記事や商品ページで使う。
実装のポイント
position: sticky のヘッダー高さを閾値で切り替える。高さ変化でスクロール位置がずれて閾値付近で点滅しやすいので、縮む/戻る閾値に差を付けて揺れを防ぐ。
- 特徴
- アニメーション
§16-07Motion
スクロールするとヘッダーが縮んで上部に留まる。
ナビゲーションを常に手元に置きつつ、読み進めるときは本文の面積を確保できる。長い記事や商品ページで使う。
position: sticky のヘッダー高さを閾値で切り替える。高さ変化でスクロール位置がずれて閾値付近で点滅しやすいので、縮む/戻る閾値に差を付けて揺れを防ぐ。