固定ヘッダー・縮むヘッダー・消えるヘッダー

ヘッダーをスクロールにどう追従させる？固定・縮む・スクロールで出入りするの3択

判断表

判断軸	アプリバー常に同じ大きさで居続ける	縮小ヘッダースクロールしたら細くなる	スクロールで現れる固定CTA 必要なときだけ出入りする帯（代用）
画面を占める高さ	常に全高。狭い画面では本文が圧迫される	上端では全高、読んでいる間は細い	読んでいる間は0。必要な場面だけ出る
ナビへの到達	いつでも1タップ	いつでも1タップ（縮んでいても押せる）	出ている間だけ
動きの量	なし	高さと影が1回変わるだけ	出入りのたびに動く
向く画面	アプリ画面。戻る・タイトル・操作が常に要る	サイトのトップ・LP。ロゴを見せつつ本文に譲る	商品ページ・記事。主役の情報が画面外に消えたとき
実装	position: sticky だけ	scroll で class を切り替え、CSS で高さを変える	IntersectionObserver で対象の可視を見る

迷ったら縮むヘッダー。ナビには常に届き、読んでいる間は細くなって本文を譲る。ただしアプリ画面のように操作が常に要るなら固定、記事や商品ページで主役の情報（価格・目次）だけ追従させたいなら出入りする帯にする。

スクロールの向きで隠れ、上へ戻すと現れる型は図鑑に見本が無い。実装するなら「下に進む間は隠す・少しでも上に戻したら出す」を基本に、慣性で上下が揺れる区間は不感帯を置く。