ナビ・リスト操作
現在地ハイライト
縦に並ぶセクションをスクロールすると、サイドの目次の現在地が自動でハイライトされる。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
コード（コピーして使えます）
<div class="spy-root">
<nav class="spy-toc">
<a class="spy-link is-active" href="#spy-s1" data-target="spy-s1">はじめに</a>
<a class="spy-link" href="#spy-s2" data-target="spy-s2">概要</a>
<a class="spy-link" href="#spy-s3" data-target="spy-s3">仕様</a>
<a class="spy-link" href="#spy-s4" data-target="spy-s4">まとめ</a>
</nav>
<div class="spy-content">
<section id="spy-s1" class="spy-section">
<h2>はじめに</h2>
<p>目次の現在地がハイライトされます。</p>
</section>
<section id="spy-s2" class="spy-section">
<h2>概要</h2>
<p>IntersectionObserverで実装しています。</p>
</section>
<section id="spy-s3" class="spy-section">
<h2>仕様</h2>
<p>外部ライブラリ不要のVanilla JSです。</p>
</section>
<section id="spy-s4" class="spy-section">
<h2>まとめ</h2>
<p>スクロールに連動して目次が追従します。</p>
</section>
</div>
</div>