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