用法
?
Twitter Bootstrap 的 ScrollSpy 插件有兩種用法 ：
?
?
-
通過 data 屬性
根據情況，給需要監視的頁面元素添加
data-spy="scroll"– 一般是 body 元素，并且通過data-target屬性指定目標：<body data-spy="scroll" data-target=".navbar">...</body>?
-
通過 Javascript 語句
$('#navbar').scrollspy()
?
舉一個例子，如下：
?
監控的導航部分 HTML 代碼：
<div class="bs-docs-sidebar">
<ul class="nav">
<li><a href="#one">hello Bootstrp 3</a></li>
<li><a href="#two">hello jQuery</a></li>
<li><a href="#three">hello ScrollSpy</a></li>
</ul>
</div>
?
?
導航相對應的內容部分代碼：
?
<div>
<h2 id="one">This is one.</h2>
<p>......</p>
<h2 id="two">This is two.</h2>
<p>......</p>
<h2 id="three">This is three.</h2>
<p>......</p>
</div>
?
?
上述代碼里，我們點擊導航部分的錨鏈接可以直接跳轉到相應的內容部分，這是這最基本的 HTML 結構。
?
最重要的，導航代碼中
ul
含有一個 CSS 類
.nav
，它是必需的，沒有的話就會導致插件無效果。
?
應用第一個方法，在 body 元素添加相關屬性：
?
<body data-spy="scroll" data-target=".bs-docs-sidebar">
?
?
data-target
屬性指向的是 class 為
bs-docs-sidebar
的
div
塊。
?
?
第二種辦法，使用 JavaScript：
$(function(){
$('.bs-docs-sidebar').scrollspy();
})
?
?
Bootstrap 文檔推薦第一種方法，因為不用任何的 JavaScript 語句即可實現 ScrollSpy 效果。
?
附： jsfiddle 示例
?
?
調試
?
如果你的 ScrollSpy 不起作用，則有一個簡單的調試辦法，利用 fireQuery ：
?
?
?
上圖是安裝 fireQuery 后打開 firebug 面板 HTML 標簽頁里的截圖，因為 fireQuery 會將 jQuery 事件等附加在 HTML 代碼中，所以我們可以清楚地看到如下一條規則，
?
selector=".bs-docs-sidebar .nav li > a"
?
?
如果你的導航部分 HTML 結構與它不一樣，則說明 jQuery 找不到它要的元素，也就沒法生成效果，解決辦法是調整代碼結構。
?
來源：www.zfanw.com/blog/bootstrap-scrollspy.html
?
默認的 bootstrap.css, 不是必須要加載的，只要給 .active 添加自定義的css style就可以！
?
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
