Bootstrap JS Scrollspy
JS Scrollspy (scrollspy.js)
Scrollspy 外掛用於根據滾動位置自動更新導航列表中的連結。
有關 Scrollspy 的教程，請閱讀我們的 Bootstrap Scrollspy 教程。
提示：Scrollspy 外掛經常與 Affix 外掛一起使用。
透過 data-* 屬性
嚮應作為可滾動區域的元素新增 data-spy="scroll"（通常是 <body> 元素）。
然後新增 data-target 屬性，其值為導航欄的 id 或類名（.navbar）。這樣可以確保導航欄與可滾動區域相連。
請注意，可滾動元素必須匹配導航欄列表項中連結的 ID（<div id="section1"> 匹配 <a href="#section1">）。
可選的 data-offset 屬性指定了在計算滾動位置時從頂部偏移的畫素數。當您覺得導航欄中的連結在跳轉到可滾動元素時過早或過晚更改啟用狀態時，這很有用。預設為 10 畫素。
需要相對定位：具有 data-spy="scroll" 的元素需要 CSS position 屬性，其值為“relative”才能正常工作。
示例
<!-- 可滾動區域 -->
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<!-- 導航欄 - <a> 元素用於跳轉到可滾動區域中的某個部分 -->
<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>嘗試滾動此頁面，在滾動時檢視導航欄！</p>
</div>
...
</body>
自己動手試一試 »
透過 JavaScript
使用以下命令手動啟用：
Scrollspy 選項
選項可以透過資料屬性或 JavaScript 傳遞。對於資料屬性，將選項名稱附加到 data-，例如 data-offset=""。
| 名稱 | 型別 | 預設值 | 描述 | 試一試 |
|---|---|---|---|---|
| offset | 數字 | 10 | 指定在計算滾動位置時從頂部偏移的畫素數 | 試一試 |
Scrollspy 方法
下表列出了所有可用的 scrollspy 方法。
| 方法 | 描述 | 試一試 |
|---|---|---|
| .scrollspy("refresh") | 在新增和刪除 scrollspy 的元素時，此方法可用於重新整理文件 | 試一試 |
Scrollspy 事件
下表列出了所有可用的 scrollspy 事件。
| 事件 | 描述 | 試一試 |
|---|---|---|
| activate.bs.scrollspy | 當 scrollspy 啟用新專案時發生 | 試一試 |
更多示例
帶動畫滾動的 Scrollspy
如何為同一頁面上的錨點新增平滑頁面滾動
平滑滾動
// 將 scrollspy 新增到 <body>
$('body').scrollspy({target: ".navbar", offset: 50});
// 為導航欄中的所有連結新增平滑滾動
$("#myNavbar a").on('click', function(event) {
// 確保在覆蓋預設行為之前 this.hash 有值
if (this.hash !== "") {
// 阻止預設的錨點點選行為
event.preventDefault();
// 儲存雜湊值
var hash = this.hash;
// 使用 jQuery 的 animate() 方法新增平滑頁面滾動
// 可選數字 (800) 指定滾動到指定區域所需的毫秒數
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// 滾動完成後將雜湊值（#）新增到 URL（預設點選行為）
window.location.hash = hash;
});
} // 結束 if
});
自己動手試一試 »
滾動監聽和固釘
將 Affix 外掛與 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>
自己動手試一試 »
垂直選單（側邊導航）
<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>
自己動手試一試 »
