Bootstrap3
日本語リファレンス

広告

スクロールスパイ  scrollspy.js


ページ内リンク用のナビゲーションナビゲーション・バーにおいて、アクティブなメニューを、ページ内のスクロール位置に応じて自動的に更新するJavaScript。

スクロールスパイを使うには、ナビゲーション(タブ・メニュー、カプセル・メニュー)ナビゲーション・バーのナビゲーション系コンポ―ネントが必要だ。

サンプル

ポイントは3つ。

  1. body要素のdata-spy属性に、scrollを指定する。
  2. ナビゲーション(タブ・メニュー、カプセル・メニュー)ナビゲーション・バーのナビゲーション系コンポ―ネントを配置。
  3. 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="#">ページ内リンク1</a></li>
			<li ><a href="#">ページ内リンク2</a></li>
			<li ><a href="#">ページ内リンク3</a></li>
		</ul>
	</div>
	・・・
</body>

広告