スティッキーサイドバー
本文をスクロールしても、横のサイドレールが position:sticky で画面上部に貼り付いて追従する2カラム。目次や広告、要約を常時見せる型。枠内をスクロールすると挙動が見えます。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
仕様書
- 向く場面
- 記事の目次・購入ボックス・著者情報を追従させる 2 カラム
- JS 無しで固定追従したいレール
- 本文が長くレールが短い構成
- 避ける場面
- レールが本文より高い場合（貼り付く余地が無い）
- 祖先に overflow:hidden がある構造
- 構成要素
- スクロール容器
- 本文カラム
- サイドレール
- レールの見出しと注記
- 持っている状態
- 通常
- フォーカス
- キーボード
スクロール容器（tabindex=0）に Tab で入り、↑↓・PageUp/Down でスクロールする。実ページではページ全体が容器になる
- 支援技術
スクロール容器は role=region＋aria-label「本文とサイドレール」で焦点を持つ。aside に aria-label。sticky は見た目だけで読み上げ順は本文→レールのまま
- 動き
なし
デザインの要点
- position: sticky; top: 0 だけで追従する。JS のスクロール監視は要らない
- グリッドの align-items: start が必須。既定の stretch だとレールが本文と同じ高さに伸び、貼り付く余地が無くなる
- 祖先に overflow: hidden があると sticky は効かない。効かないときはまず親をたどって確認する
実装メモ
プレビューはステージ自身をスクロール容器にしています（overflow-y:auto）。実ページではページ全体がスクロール容器になるため、レール側の親カラムに十分な高さがあれば同様に貼り付きます。sticky が効かないときは、祖先要素に overflow:hidden が付いていないか確認してください。
コード（コピーして使えます）
<div class="stage" tabindex="0" role="region" aria-label="本文とサイドレール（スクロールできます）">
<div class="ss">
<main class="ss-main">
<h2 class="ss-h">スクロールしてみてください</h2>
<p class="ss-p">本文は下へ長く続きます。右のサイドレールは上端に貼り付いたまま追従します。</p>
<p class="ss-p">position: sticky と top の指定だけで、JavaScript なしに固定追従を実現できます。</p>
<p class="ss-p">親要素の高さがある限り、レールはその範囲内で貼り付き続けます。</p>
<p class="ss-p">記事の目次、購入ボックス、著者情報などを常に視界へ置くのに向きます。</p>
<p class="ss-p">本文の一番下まで来ると、レールも一緒に離れていきます。</p>
<p class="ss-p">これがスティッキーサイドバーの基本挙動です。</p>
</main>
<aside class="ss-rail" aria-label="サイドレール">
<span class="ss-rail-thumb"></span>
<span class="ss-rail-t">目次</span>
<span class="ss-rail-note">sticky · top:0</span>
</aside>
</div>
</div>