Bootstrap滾動(dòng)監(jiān)聽(tīng)（Scrollspy）插件詳解
滾動(dòng)監(jiān)聽(tīng)（Scrollspy）插件，即自動(dòng)更新導(dǎo)航插件，會(huì)根據(jù)滾動(dòng)條的位置自動(dòng)更新對(duì)應(yīng)的導(dǎo)航目標(biāo)。其基本的實(shí)現(xiàn)是隨著您的滾動(dòng)，基于滾動(dòng)條的位置向?qū)Ш綑谔砑?.active class。
如果您想要單獨(dú)引用該插件的功能，那么您需要引用 scrollspy.js?；蛘?，正如 Bootstrap 插件概覽 一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。
一、用法
您可以向頂部導(dǎo)航添加滾動(dòng)監(jiān)聽(tīng)行為：
1、通過(guò) data 屬性：向您想要監(jiān)聽(tīng)的元素（通常是 body）添加 data-spy="scroll"。然后添加帶有 Bootstrap .nav 組件的父元素的 ID 或 class 的屬性 data-target。為了它能正常工作，您必須確保頁(yè)面主體中有匹配您所要監(jiān)聽(tīng)鏈接的 ID 的元素存在。
<body data-spy="scroll" data-target=".navbar-example"> ... <div class="navbar-example"> <ul class="nav nav-tabs"> ... </ul> </div> ... </body>
2、通過(guò) JavaScript：您可以通過(guò) JavaScript 調(diào)用滾動(dòng)監(jiān)聽(tīng)，選取要監(jiān)聽(tīng)的元素，然后調(diào)用 .scrollspy() 函數(shù)：
$('body').scrollspy({ target: '.navbar-example' })
二、滾動(dòng)監(jiān)聽(tīng)
滾動(dòng)監(jiān)聽(tīng)插件是用來(lái)根據(jù)滾動(dòng)條所處在的位置自動(dòng)更新導(dǎo)航項(xiàng)目， 顯示導(dǎo)航項(xiàng)目高亮顯示。
//基本實(shí)例
<nav id="nav" class="navbar navbar-default">
<a href="#" class="navbar-brand">Web 開(kāi)發(fā)</a>
<ul class="nav navbar-nav">
<li>
<a href="#html5">HTML5</a>
</li>
<li>
<a href="#bootstrap">Bootstrap</a>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">JavaScript <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#jquery">jQuery</a>
</li>
<li>
<a href="#yui">Yui</a>
</li>
<li>
<a href="#extjs">Extjs</a>
</li>
</ul>
</li>
</ul>
</nav>
<div data-offset="0" data-target="#nav" data-spy="scroll" style="height: 200px; overflow: auto; position: relative;padding: 0 10px;">
<h4 id="html5">HTML5</h4>
<p>
標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用 HTML 標(biāo)準(zhǔn)自 1999 年 12 月發(fā)布的 HTML4.01后，后繼的 HTML5 和其它標(biāo)準(zhǔn)被束之高閣，為了推動(dòng) Web 標(biāo)準(zhǔn)化運(yùn)動(dòng)的發(fā)展，一些公司聯(lián)合起來(lái)，成立了一個(gè)叫做 Web Hypertext Application Technology Working Group（Web 超文本應(yīng)用技術(shù)工作組 -WHATWG） 的組織。WHATWG 致力于 Web 表單和應(yīng)用程序，而 W3C（World Wide Web Consortium，萬(wàn)維網(wǎng)聯(lián)盟） 專(zhuān)注于 XHTML2.0。在 2006 年，
雙方?jīng)Q定進(jìn)行合作，來(lái)創(chuàng)建一個(gè)新版本的 HTML。
</p>
<h4 id="bootstrap">Bootstrap</h4>
<p>
Bootstrap，來(lái)自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基于 HTML、 CSS、 JAVASCRIPT 的， 它簡(jiǎn)潔靈活， 使得 Web 開(kāi)發(fā)更加快捷。 [1]它由 Twitter的設(shè)計(jì)師 Mark Otto 和 Jacob Thornton 合作開(kāi)發(fā)，是一個(gè) CSS/HTML 框架。Bootstrap提供了優(yōu)雅的 HTML 和 CSS 規(guī)范，它即是由動(dòng)態(tài) CSS 語(yǔ)言 Less 寫(xiě)成。Bootstrap 一經(jīng)推出后頗受歡迎，一直是 GitHub 上的熱門(mén)開(kāi)源項(xiàng)目，包括 NASA 的 MSNBC（微軟全國(guó)廣播公司）的 Breaking News 都使用了該項(xiàng)目。[2]國(guó)內(nèi)一些移動(dòng)開(kāi)發(fā)者較為熟悉的框架，如 WeX5前端開(kāi)源框架等，也是基于 Bootstrap 源碼進(jìn)行性能優(yōu)化而來(lái)。[3]
</p>
<h4 id="jquery">jQuery</h4>
<p>
JQuery 是繼 prototype 之后又一個(gè)優(yōu)秀的 Javascript 庫(kù)。 它是輕量級(jí)的 js庫(kù) ，它兼容 CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+） ，jQuery2.0 及后續(xù)版本將不再支持 IE6/7/8 瀏覽器。jQuery 使用戶(hù)能更方便地處理 HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用） 、 events、 實(shí)現(xiàn)動(dòng)畫(huà)效果， 并且方便地為網(wǎng)站提供 AJAX交互。jQuery 還有一個(gè)比較大的優(yōu)勢(shì)是，它的文檔說(shuō)明很全，而且各種應(yīng)用也說(shuō)得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇。 jQuery 能夠使用戶(hù)的 html 頁(yè)面保持代碼和 html 內(nèi)容分離， 也就是說(shuō)， 不用再在 html 里面插入一堆 js 來(lái)調(diào)用命令了， 只需要定義 id 即可。
</p>
<h4 id="yui">Yui</h4>
<p>
近幾年隨著 jQuery、Ext 以及 CSS3 的發(fā)展，以 Bootstrap 為代表的前端開(kāi)發(fā)框架如雨后春筍般擠入視野， 可謂應(yīng)接不暇。 不論是桌面瀏覽器端還是移動(dòng)端都涌現(xiàn)出很多優(yōu)秀的框架，極大豐富了開(kāi)發(fā)素材，也方便了大家的開(kāi)發(fā)。這些框架各有特點(diǎn)，本文對(duì)這些框架進(jìn)行初步的介紹與比較， 希望能夠?yàn)榇蠹疫x擇框架提供一點(diǎn)幫助， 也為后續(xù)詳細(xì)研究這些框架的拋磚引玉。
</p>
<h4 id="extjs">Extjs</h4>
<p>
ExtJS 可以用來(lái)開(kāi)發(fā) RIA 也即富客戶(hù)端的 AJAX 應(yīng)用，是一個(gè)用 javascript寫(xiě)的，主要用于創(chuàng)建前端用戶(hù)界面，是一個(gè)與后臺(tái)技術(shù)無(wú)關(guān)的前端 ajax 框架。因此，可以把 ExtJS 用在.Net、Java、Php 等各種開(kāi)發(fā)語(yǔ)言開(kāi)發(fā)的應(yīng)用中。ExtJs 最開(kāi)始基于 YUI 技術(shù)，由開(kāi)發(fā)人員 JackSlocum 開(kāi)發(fā)，通過(guò)參考 JavaSwing 等機(jī)制來(lái)組織可視化組件，無(wú)論從 UI 界面上 CSS 樣式的應(yīng)用，到數(shù)據(jù)解析上的異常處理，都可算是一款不可多得的JavaScript 客戶(hù)端技術(shù)的精品。
</p>
</div>
這里有兩個(gè)重要的屬性，如下圖：
PS：在一個(gè)菜單和一個(gè)容易的時(shí)候，data-target 不設(shè)置也可以穩(wěn)定實(shí)現(xiàn)滾動(dòng)監(jiān)聽(tīng)高亮。但多個(gè)導(dǎo)航時(shí)，你不關(guān)聯(lián)其中一個(gè)，會(huì)導(dǎo)致錯(cuò)誤，所以，一般要加上。
如果使用 JavaScript 腳本方式， 可以去掉 data-*， 使用腳本屬性定義： offset、 spy和 target。具體方法如下：
//使用腳本方式定義屬性
$('#content').scrollspy({
offset : 0,
target : '#nav',
});
滾動(dòng)監(jiān)聽(tīng)還有一個(gè)切換到新條目的事件。
//事件綁定在導(dǎo)航上
$('#nav').on('activate.bs.scrollspy', function() {
alert('新條目被激活后觸發(fā)此事件！');
});
滾動(dòng)監(jiān)聽(tīng)還有一個(gè)更新容器 DOM 的方法。
//HTML 部分
<section class="sec">
<h4 id="html5">HTML5 <a href="#" onclick="removeSec(this)">刪除此項(xiàng)</a></h4>
<p>
...
</p>
</section>
//刪除內(nèi)容時(shí)，刷新一下 DOM，避免導(dǎo)航監(jiān)聽(tīng)錯(cuò)位
function removeSec(e) {
$(e).parents('.sec').remove();
$('#content').scrollspy('refresh');
}
注意：這個(gè)方法必須使用 data-*聲明式。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
- Bootstrap滾動(dòng)監(jiān)聽(tīng)組件scrollspy.js使用方法詳解
- bootstrap監(jiān)聽(tīng)滾動(dòng)實(shí)現(xiàn)頭部跟隨滾動(dòng)
- BootStrap下拉菜單和滾動(dòng)監(jiān)聽(tīng)插件實(shí)現(xiàn)代碼
- 學(xué)習(xí)Bootstrap滾動(dòng)監(jiān)聽(tīng) 附調(diào)用方法
- 全面解析Bootstrap中scrollspy（滾動(dòng)監(jiān)聽(tīng)）的使用方法
- Bootstrap教程JS插件滾動(dòng)監(jiān)聽(tīng)學(xué)習(xí)筆記分享
- Bootstrap每天必學(xué)之滾動(dòng)監(jiān)聽(tīng)
- Bootstrap+Vue滑動(dòng)監(jiān)聽(tīng)Scrollspy實(shí)現(xiàn)餐廳餐品展示
相關(guān)文章
由JavaScript中call()方法引發(fā)的對(duì)面向?qū)ο罄^承機(jī)制call的思考
看到這里的call()方法，以前也看過(guò)手冊(cè)，說(shuō)是對(duì)象冒充的，用于繼承的。在jQuery源碼里有點(diǎn)亂，所以就把這部分提取出來(lái)，放在一個(gè)單獨(dú)文件中，來(lái)看看具體執(zhí)行。2011-09-09
JS實(shí)現(xiàn)的tab切換選項(xiàng)卡效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的tab切換選項(xiàng)卡效果,結(jié)合具體實(shí)例形式分析了JS通過(guò)鼠標(biāo)事件觸發(fā)自定義函數(shù)控制頁(yè)面元素樣式變換實(shí)現(xiàn)tab切換功能的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-02-02
獲取下拉列表框的值是數(shù)組，split，$.inArray示例
獲取下拉列表框的值是數(shù)組，下面用product_id 去匹配是否包含在一個(gè)數(shù)組中，感興趣的朋友不要錯(cuò)過(guò)2013-11-11
一套值得分享和大家收藏的Bootstrap學(xué)習(xí)教程，完整的知識(shí)體系，系統(tǒng)的學(xué)習(xí)資料，幫助大家開(kāi)啟Bootstrap Table學(xué)習(xí)之旅，享受學(xué)習(xí)的樂(lè)趣2016-11-11
wap圖片滾動(dòng)特效無(wú)css3元素純js腳本編寫(xiě)
手機(jī)圖片滑動(dòng)切換，網(wǎng)上有很多這樣的例子，但都借助于其他組件，讓代碼混亂的不行，本例介紹的是無(wú)css3元素純js腳本編寫(xiě)的wap圖片滾動(dòng)特效2014-08-08
javascript提供了許多函數(shù)供開(kāi)發(fā)人員使用，下面給出一個(gè)簡(jiǎn)單介紹，更詳細(xì)的信息請(qǐng)參考Visual InterDev提供的在線(xiàn)幫助。2009-12-12
JS實(shí)現(xiàn)進(jìn)度條動(dòng)態(tài)加載特效
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)進(jìn)度條動(dòng)態(tài)加載特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
老生常談js動(dòng)態(tài)添加事件--- 事件委托
下面小編就為大家?guī)?lái)一篇老生常談js動(dòng)態(tài)添加事件--- 事件委托。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
JS正則表達(dá)式完美實(shí)現(xiàn)身份證校驗(yàn)功能
這篇文章主要介紹了JS正則表達(dá)式完美實(shí)現(xiàn)身份證校驗(yàn)功能,需要的朋友可以參考下2017-10-10
淺談JSON.stringify()和JOSN.parse()方法的不同
parse 用于從一個(gè)字符串中解析出json 對(duì)象而stringify用于從一個(gè)對(duì)象解析出字符串，這篇文章主要介紹了JSON.stringify()和JOSN.parse()方法的不同,需要的朋友可以參考下2016-08-08