レイアウト・構造
スティッキーサイドバー
本文をスクロールしても、横のサイドレールが position:sticky で画面上部に貼り付いて追従する2カラム。目次や広告、要約を常時見せる型。枠内をスクロールすると挙動が見えます。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
実装メモ
プレビューはステージ自身をスクロール容器にしています（overflow-y:auto）。実ページではページ全体がスクロール容器になるため、レール側の親カラムに十分な高さがあれば同様に貼り付きます。sticky が効かないときは、祖先要素に overflow:hidden が付いていないか確認してください。
コード（コピーして使えます）
<div class="stage">
<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>