スクロールスパイ scrollspy.js
ページ内リンク用のナビゲーションやナビゲーション・バーにおいて、アクティブなメニューを、ページ内のスクロール位置に応じて自動的に更新するJavaScript。
スクロールスパイを使うには、ナビゲーション（タブ・メニュー、カプセル・メニュー）やナビゲーション・バーのナビゲーション系コンポ—ネントが必要だ。
サンプル
使い方
ナビゲーション・バーにおけるスクロールスパイ
タブ・メニューにおけるスクロールスパイ
カプセル・メニューにおけるスクロールスパイ
縦型カプセル・メニューにおけるスクロールスパイ
スクロールスパイとアフィックスを併用する縦型カプセル・メニュー
JavaScriptでスクロールスパイを呼び出す
offsetオプション
offsetオプションを指定し、JavaScriptで呼び出す
イベント
使い方
ポイントは３つ。
body要素のdata-spy属性に、scrollを指定する。- ナビゲーション（タブ・メニュー、カプセル・メニュー）やナビゲーション・バーのナビゲーション系コンポ—ネントを配置。
body要素のdata-target属性に、スクロールに連動させたいナビゲーション系コンポ—ネントのid属性値やclass属性値を指定する。
ソースコード
<body data-spy="scroll" data-target="#sampleNavbar"> ・・・ <div id="sampleNavbar"> <ul class="nav nav-pills nav-stacked"> <li ><a href="#">ページ内リンク１</a></li> <li ><a href="#">ページ内リンク２</a></li> <li ><a href="#">ページ内リンク３</a></li> </ul> </div> ・・・ </body>