用法
?
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元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
