はじめに
Bootstrap5 には、JavaScript を使った便利な UI コンポーネントが多数用意されています。
その中でも「スクロールスパイ（Scrollspy）」は、ページ内のスクロール位置に応じて ナビゲーションの状態を自動で更新してくれる仕組み です。
長いページやセクションが多いページで、現在位置を視覚的に示すのに役立ちます。
今回は、このスクロールスパイを実際に触ってみて、どんな場面で使えるのか、どう実装するのかを整理しました。
スクロールスパイとは何か
スクロールスパイ（Scrollspy）は、ページのスクロール位置を監視し、対応するナビゲーション項目を自動でアクティブ表示する機能 です。
ドキュメントサイトや長文記事でよく見られる UI で、ユーザーが「今どこを読んでいるのか」を把握しやすくなります。
どんな場面で活用できるのか
スクロールスパイが活きる場面は次のとおりです。
長い記事・技術ドキュメント
ランディングページ（LP）
プロダクト紹介ページ
ポートフォリオサイト
基本的な実装方法
Bootstrap5 のスクロールスパイは、HTML 属性だけで動作させる方法と、JavaScript で初期化する方法があります。
ここでは、もっともシンプルな HTML 属性版を紹介します。
① ナビゲーションを用意する
<nav id="navbar-example" class="nav flex-column">
<a class="nav-link" href="#section1">セクション1</a>
<a class="nav-link" href="#section2">セクション2</a>
<a class="nav-link" href="#section3">セクション3</a>
</nav>
② スクロール対象のコンテナに属性を付与
<div data-bs-spy="scroll" data-bs-target="#navbar-example" class="scrollspy-example">
<h4 id="section1">セクション1</h4>
<p>…</p>
<h4 id="section2">セクション2</h4>
<p>…</p>
<h4 id="section3">セクション3</h4>
<p>…</p>
</div>
③ JavaScript で初期化（必要に応じて）
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
});
実際に触ってみて感じたこと
HTML 属性だけで動くため、実装がとても簡単
長いページでの迷子防止に効果的
スクロール対象の高さ調整が必要な場合がある
固定ナビゲーションと組み合わせるとさらに便利
実装例（シンプル版）
<nav id="navbar-example2" class="nav nav-pills flex-column mb-3">
<a class="nav-link" href="#item-1">項目1</a>
<a class="nav-link" href="#item-2">項目2</a>
<a class="nav-link" href="#item-3">項目3</a>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" class="scrollspy-example" tabindex="0">
<h4 id="item-1">項目1</h4>
<p>…</p>
<h4 id="item-2">項目2</h4>
<p>…</p>
<h4 id="item-3">項目3</h4>
<p>…</p>
</div>
まとめ
スクロールスパイは、スクロール位置に応じてナビゲーションを更新する便利な機能です。
長いページやセクションが多いページで UX を向上でき、技術ブログや LP など幅広い場面で活用できます。
Bootstrap の JavaScript コンポーネントの中でも、導入しやすく効果が分かりやすい機能だと感じました。
