滾動(dòng)監(jiān)聽（Scrollspy）插件，即自動(dòng)更新導(dǎo)航插件，會(huì)根據(jù)滾動(dòng)條的位置自動(dòng)更新對應(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)聽行為：
1、通過 data 屬性：向您想要監(jiān)聽的元素（通常是 body）添加 data-spy="scroll"。然后添加帶有 Bootstrap .nav 組件的父元素的 ID 或 class 的屬性 data-target。為了它能正常工作，您必須確保頁面主體中有匹配您所要監(jiān)聽鏈接的 ID 的元素存在。
<body data-spy="scroll" data-target=".navbar-example"> ... <div class="navbar-example"> <ul class="nav nav-tabs"> ... </ul> </div> ...</body>
2、通過 JavaScript：您可以通過 JavaScript 調(diào)用滾動(dòng)監(jiān)聽，選取要監(jiān)聽的元素，然后調(diào)用 .scrollspy() 函數(shù)：
$('body').scrollspy({ target: '.navbar-example' })
二、滾動(dòng)監(jiān)聽
滾動(dòng)監(jiān)聽插件是用來根據(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 開發(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)記語言下的一個(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)合起來，成立了一個(gè)叫做 Web Hypertext Application Technology Working Group（Web 超文本應(yīng)用技術(shù)工作組 -WHATWG） 的組織。WHATWG 致力于 Web 表單和應(yīng)用程序，而 W3C（World Wide Web Consortium，萬維網(wǎng)聯(lián)盟） 專注于 XHTML2.0。在 2006 年， 雙方?jīng)Q定進(jìn)行合作，來創(chuàng)建一個(gè)新版本的 HTML。 </p> <h4 id="bootstrap">Bootstrap</h4> <p> Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基于 HTML、 CSS、 JAVASCRIPT 的， 它簡潔靈活， 使得 Web 開發(fā)更加快捷。 [1]它由 Twitter的設(shè)計(jì)師 Mark Otto 和 Jacob Thornton 合作開發(fā)，是一個(gè) CSS/HTML 框架。Bootstrap提供了優(yōu)雅的 HTML 和 CSS 規(guī)范，它即是由動(dòng)態(tài) CSS 語言 Less 寫成。Bootstrap 一經(jīng)推出后頗受歡迎，一直是 GitHub 上的熱門開源項(xiàng)目，包括 NASA 的 MSNBC（微軟全國廣播公司）的 Breaking News 都使用了該項(xiàng)目。[2]國內(nèi)一些移動(dòng)開發(fā)者較為熟悉的框架，如 WeX5前端開源框架等，也是基于 Bootstrap 源碼進(jìn)行性能優(yōu)化而來。[3] </p> <h4 id="jquery">jQuery</h4> <p> JQuery 是繼 prototype 之后又一個(gè)優(yōu)秀的 Javascript 庫。 它是輕量級的 js庫 ，它兼容 CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+） ，jQuery2.0 及后續(xù)版本將不再支持 IE6/7/8 瀏覽器。jQuery 使用戶能更方便地處理 HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用） 、 events、 實(shí)現(xiàn)動(dòng)畫效果， 并且方便地為網(wǎng)站提供 AJAX交互。jQuery 還有一個(gè)比較大的優(yōu)勢是，它的文檔說明很全，而且各種應(yīng)用也說得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇。 jQuery 能夠使用戶的 html 頁面保持代碼和 html 內(nèi)容分離， 也就是說， 不用再在 html 里面插入一堆 js 來調(diào)用命令了， 只需要定義 id 即可。 </p> <h4 id="yui">Yui</h4> <p> 近幾年隨著 jQuery、Ext 以及 CSS3 的發(fā)展，以 Bootstrap 為代表的前端開發(fā)框架如雨后春筍般擠入視野， 可謂應(yīng)接不暇。 不論是桌面瀏覽器端還是移動(dòng)端都涌現(xiàn)出很多優(yōu)秀的框架，極大豐富了開發(fā)素材，也方便了大家的開發(fā)。這些框架各有特點(diǎn)，本文對這些框架進(jìn)行初步的介紹與比較， 希望能夠?yàn)榇蠹疫x擇框架提供一點(diǎn)幫助， 也為后續(xù)詳細(xì)研究這些框架的拋磚引玉。 </p> <h4 id="extjs">Extjs</h4> <p> ExtJS 可以用來開發(fā) RIA 也即富客戶端的 AJAX 應(yīng)用，是一個(gè)用 javascript寫的，主要用于創(chuàng)建前端用戶界面，是一個(gè)與后臺技術(shù)無關(guān)的前端 ajax 框架。因此，可以把 ExtJS 用在.Net、Java、Php 等各種開發(fā)語言開發(fā)的應(yīng)用中。ExtJs 最開始基于 YUI 技術(shù)，由開發(fā)人員 JackSlocum 開發(fā)，通過參考 JavaSwing 等機(jī)制來組織可視化組件，無論從 UI 界面上 CSS 樣式的應(yīng)用，到數(shù)據(jù)解析上的異常處理，都可算是一款不可多得的JavaScript 客戶端技術(shù)的精品。 </p></div>
這里有兩個(gè)重要的屬性，如下圖：
PS：在一個(gè)菜單和一個(gè)容易的時(shí)候，data-target 不設(shè)置也可以穩(wěn)定實(shí)現(xiàn)滾動(dòng)監(jiān)聽高亮。但多個(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)聽還有一個(gè)切換到新條目的事件。
//事件綁定在導(dǎo)航上
$('#nav').on('activate.bs.scrollspy', function() {
alert('新條目被激活后觸發(fā)此事件！');
});
滾動(dòng)監(jiān)聽還有一個(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)聽錯(cuò)位
function removeSec(e) { $(e).parents('.sec').remove(); $('#content').scrollspy('refresh');}注意：這個(gè)方法必須使用 data-*聲明式。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。
新聞熱點(diǎn)
疑難解答
