JS Scrollspy（scrollspy.js）
Scrollspyプラグインは自動的にスクロール位置に基づいて、ナビゲーション・リスト内のリンクを更新するために使用されます。
Scrollspyに関するチュートリアルについては、当社の読みブートストラップScrollspyチュートリアル 。
ヒント：Scrollspyプラグインは、多くの場合と一緒に使用される接辞のプラグイン。
ヴィアdata-*属性
追加data-spy="scroll"スクロール可能な領域として使用されるべき要素に（多くの場合、これは<body>要素）。
そして、追加data-target IDの値またはナビゲーションバー（のクラス名を持つ属性を.navbar ）。 これは、ことを確認することであるnavbarスクロールエリアに接続されています。
スクロール可能な要素は、ナビゲーションバーのリスト項目内のリンク（のIDと一致している必要があります<div id="section1">一致する<a href="#section1"> ）。
オプションのdata-offset属性は、スクロールの位置を計算する際に先頭からのオフセットするピクセル数を指定します。 あなたがスクロール可能な要素にジャンプするときのナビゲーションバー内のリンクが早すぎる、あまりにもすぐにアクティブ状態を変更したりと感じるときに便利です。 デフォルトは10ピクセルです。
相対的な位置決めを必要とする：を持つ要素data-spy="scroll" CSSの必要とするpositionの値で、プロパティを"relative"正しく動作します。
例
<!-- 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>
»それを自分で試してみてください JavaScriptを介して、
手動で有効にします。
Scrollspyオプション
オプションは、データ属性またはJavaScriptを介して渡すことができます。 データ属性の場合、データ・オフセット= ""のように、データーにオプション名を追加します。
| 名 | タイプ | デフォルト | 説明 | それを試してみてください |
|---|---|---|---|---|
| offset | number | 10 | スクロールの位置を計算する際に上からオフセットするピクセル数を指定します | それを試してみてください |
Scrollspy方法
次の表は、使用可能なすべてのscrollspyメソッドを示します。
| 方法 | 説明 | それを試してみてください |
|---|---|---|
| .scrollspy("refresh") | scrollspyから要素を追加したり削除すると、このメソッドは、ドキュメントを最新表示するために使用することができます | それを試してみてください |
Scrollspyイベント
次の表は、使用可能なすべてのscrollspyイベントを示します。
| イベント | 説明 | それを試してみてください |
|---|---|---|
| activate.bs.scrollspy | 新しいアイテムがscrollspyによって活性化されるときに発生します | それを試してみてください |
例
アニメーションスクロールとScrollspy
どのように同じページ上のアンカーにスムーズなページスクロールを追加するには：
スムーズなスクロール
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar",
offset: 50});
// Add smooth scrolling to all links inside a navbar
$("#myNavbar a").on('click', function(event){
//
Prevent default anchor click behavior
event.preventDefault();
// Store hash (#)
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
//
The optional number (800) specifies the number of milliseconds it takes to scroll to
the specified area (the speed of the animation)
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
}); »それを自分で試してみてください Scrollspy＆接辞
使用接辞 Scrollspyプラグインと一緒にプラグインを：
水平方向のメニュー（ナビゲーションバー）
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav
class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body> »それを自分で試してみてください 垂直メニュー（Sidenav）
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills
nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body> »それを自分で試してみてください