縮小ヘッダー
スクロールするとヘッダーが縮み、背景と影が付く。上部に戻ると元のサイズに戻る。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
仕様書
- 向く場面
- スクロールで本文を広く見せたいLP・記事
- 上部で存在感、読み進めると控えめにしたいヘッダー
- ロゴとナビが少ないサイト
- 避ける場面
- ナビ項目が多く縮めると折り返す
- 高さ変化で本文がガタつく固定レイアウト
- ヘッダーが常に同じ見た目であるべき業務画面
- 構成要素
- ヘッダー
- ロゴ
- ナビリンク
- 本文セクション
- 持っている状態
- 通常
- 押下中
- キーボード
Tab でナビリンクへ・Enter で選択（a 標準）。縮小はスクロール位置に追従するだけ
- 支援技術
header 内の nav リンクとして読み上げ順は不変。縮小は装飾で情報は変わらない。reduced-motion で transition を切り即時に縮む。リンクに focus-visible の輪郭
- 動き
背景・影・余白・文字サイズを 0.3s ease で縮め、スクロール開始を伝える。上端で元に戻る。reduced-motion では即時
デザインの要点
- 縮めるのは余白・文字サイズ・背景の3つだけ。高さを大きく変えると本文が数十px ガタつき、縮小より揺れが目立つ
- しきい値は 40px と浅くし、上端に戻ったら必ず元に戻す。往復で見た目が同じ地点で切り替わると「動いた理由」が分かる
- 透明→塗りの背景に影を添える。本文に重なり始めた瞬間に、ヘッダーが手前にあることを立体で示す
- scroll は passive で受ける。preventDefault の有無を毎回確認させると、スクロールそのものが引っかかる
コード（コピーして使えます）
<header class="sh-header">
<div class="sh-inner">
<span class="sh-logo">MyBrand</span>
<nav class="sh-nav">
<a href="#">ホーム</a>
<a href="#">サービス</a>
</nav>
</div>
</header>
<div class="sh-body">
<div class="sh-section sh-section--top">
<p>↓ スクロールするとヘッダーが縮みます</p>
</div>
<div class="sh-section">
<p>スクロール中…</p>
</div>
<div class="sh-section">
<p>さらに下へ</p>
</div>
<div class="sh-section">
<p>↑ 上に戻るとヘッダーが広がります</p>
</div>
</div>