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> 試一試»