sticky追従ヘッダー
セクション見出しが position:sticky で上に張りつきながら、下のコンテンツがスクロールする。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
仕様書
- 向く場面
- 章立ての長いリスト（連絡先・設定）
- 今どの章にいるかを常に見せたい一覧
- 日付・カテゴリで区切られたフィード
- 避ける場面
- 見出しが多く画面の大半を占める短い章
- 横スクロール要素を含む章（overflow で sticky が切れる）
- 構成要素
- スクロール容器
- 章見出し
- 項目
- スクロールヒント
- 持っている状態
- 通常
- キーボード
Tab でスクロール容器へ（tabindex=0）、↑↓/PageDown でスクロール
- 支援技術
h2 の見出し階層で章を辿れる。sticky は位置だけで DOM 順・読み上げ順は不変。見出しは色＋文字で区別
- 動き
なし（見出しはスクロールに合わせて上端に留まるだけ）
デザインの要点
- sticky の見出しは section の中に置く。section の下端に来ると自然に押し上げられ、次の章の見出しと入れ替わる（JS 不要）
- 見出しに z-index: 1 と不透明な背景を付ける。無いと下の項目が透けて重なり、張りついているのが読めない
- 祖先に overflow: hidden／auto があると sticky はその要素の中でしか効かない。横スクロール要素を挟むと途中で剥がれる
- 見出しの高さ（10px 上下 padding＋15px）を一定にする。章ごとに高さが違うと入れ替わりの瞬間に段差が出る
コード（コピーして使えます）
<div class="scroll-root" tabindex="0">
<section class="sec">
<h2 class="sec-head" style="background:#2b50c7">Chapter 1</h2>
<ul class="sec-list">
<li>アイテム A</li>
<li>アイテム B</li>
<li>アイテム C</li>
</ul>
</section>
<section class="sec">
<h2 class="sec-head" style="background:#1a8c5b">Chapter 2</h2>
<ul class="sec-list">
<li>アイテム D</li>
<li>アイテム E</li>
<li>アイテム F</li>
</ul>
</section>
<section class="sec">
<h2 class="sec-head" style="background:#b5341e">Chapter 3</h2>
<ul class="sec-list">
<li>アイテム G</li>
<li>アイテム H</li>
<li>アイテム I</li>
</ul>
</section>
</div>
<div class="stack-hint">↓ スクロール</div>