スクロールスパイ ナビゲーション
スクロールスパイは、本文をスクロールするのに合わせて、左側のナビゲーションで「今どのセクションを見ているか」を自動でハイライトする仕組みです。利用者は長いページのどこにいるかを把握しやすくなり、目次代わりとして読み進めを助けます。
解説
スクロールスパイは、本文をスクロールするのに合わせて、左側のナビゲーションで「今どのセクションを見ているか」を自動でハイライトする仕組みです。利用者は長いページのどこにいるかを把握しやすくなり、目次代わりとして読み進めを助けます。リンクをクリックすると scroll-behavior:smooth で対象セクションへなめらかに移動します。
動作の中身
各セクションを IntersectionObserver で監視し、表示領域に半分以上入ったセクションを判定して、対応するリンクに sspy__link--active クラスを付け替えています。監視の基準（root）を本文のスクロール領域に指定しているため、ページ全体ではなくこのボックス内のスクロールに反応するのがポイントです。
- 長文の記事・利用規約・FAQ など、見出しが多いページの目次に向きます
- アクティブ表示の色は
sspy__link--activeの背景と文字色で変えられます - セクションには id を必ず付け、リンクの href と一致させる必要があります
よくある質問
ハイライトされる色を変えたいです
アクティブ状態のリンクに付く sspy__link--active クラスの背景色と文字色を変更します。初期値は青背景に白文字なので、ブランドの色に合わせて書き換えると統一感が出ます。
セクションが正しく検出されません
各セクションの id と、ナビゲーション側リンクの href の指定が一致しているか確認してください。たとえば id が sspy-s1 なら、リンクの href は番号記号に続けて sspy-s1 と書く必要があります。