Scrollspy プラグインは、スクロール位置に基づいて、ナビゲーションリストのリンクを自動的に 更新するような場合に使用します。
次の例は、scrollspy の作成方法を示しています：
<!-- The scrollable area -->
<body data-spy="scroll"
data-target=".navbar" data-offset="50">
<!-- The navbar - The
<a> elements are used to jump to a section in the scrollable area -->
<nav
class="navbar navbar-inverse navbar-fixed-top">
...
<ul class="nav
navbar-nav">
<li><a href="#section1">Section 1</a></li>
...
</nav>
<!-- Section 1
-->
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at
the navigation bar while scrolling!</p>
</div>
...
</body>
Try it Yourself »
スクロール可能な領域として使用する要素（多くの場合、<body> 要素です）に、
data-spy="scroll" "を追加します。
次に、ナビゲーションバー（.navbar）の id の値、
またはクラス名を持つ data-target 属性を追加します。
これは、 navbar がスクロール可能な領域に接続されていることを確認するためです。
スクロール可能な要素は、navbar のリスト項目内のリンクの ID と一致しなければならないことに注意してください
（<div id="section1"> は <a href="#section1"> に一致します）。
オプションの data-offset 属性は、スクロール位置を計算する際に先頭からのオフセットするピクセル数を指定します。
スクロール可能な要素にジャンプするときの、ナビゲーションバー内のリンクがアクティブ状態になるのが
あまりにも早すぎると感じる場合に便利です。デフォルトは 10 ピクセルです。
配置が必要です：正常に動作させるには、data-spy="scroll" を持った要素に "relative" の値を持つ CSS position プロパティが必要です。
この例では、メニューに Bootstrap 縦型ナビゲーションピルを使用します：
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container">
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked">
<li><a href="#section1">Section 1</a></li>
...
</ul>
</nav>
<div
class="col-sm-9">
<div id="section1">
<h1>Section 1</h1>
<p>Try to
scroll this page and look at the navigation list while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body>
Try it Yourself »
すべての scrollspy メソッドおよびイベントの完全なリファレンスは、 Bootstrap JS Scrollspy リファレンス をご覧ください。