Scrollspyプラグイン
Scrollspyプラグインは自動的にスクロール位置に基づいて、ナビゲーション・リスト内のリンクを更新するために使用されます。
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> »それを自分で試してみてください 例の説明しました
追加data-spy="scroll"スクロール可能な領域として使用されるべき要素に（多くの場合、これは<body>要素）。
そして、追加data-target IDの値またはナビゲーションバー（のクラス名を持つ属性を.navbar ）。 これは、ナビゲーションバーがスクロールエリアに接続されていることを確認することです。
スクロール可能な要素は、ナビゲーションバーのリスト項目内のリンク（のIDと一致している必要があります<div id="section1">一致する<a href="#section1"> ）。
オプションのdata-offset属性は、スクロールの位置を計算する際に先頭からのオフセットするピクセル数を指定します。 あなたがスクロール可能な要素にジャンプするときのナビゲーションバー内のリンクが早すぎる、あまりにもすぐにアクティブ状態を変更したりと感じるときに便利です。 デフォルトは10ピクセルです。
相対的な位置決めを必要とする：を持つ要素data-spy="scroll" CSSの必要とするpositionの値で、プロパティを"relative"正しく動作します。
Scrollspy垂直メニュー
この例では、メニューとしてブートストラップの垂直ナビゲーションの丸薬を使用します。
例
<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> »それを自分で試してみてください 完了してBootstrap Scrollspyリファレンス
すべてscrollspyメソッドおよびイベントの完全なリファレンスについては、当社に行くブートストラップJS Scrollspyリファレンス 。