Bootstrap 滾動監聽（Scrollspy）插件
滾動監聽（Scrollspy）插件，即自動更新導航插件，會根據滾動條的位置自動更新對應的導航目標。 其基本的實現是隨著您的滾動，基於滾動條的位置嚮導航欄添加.active class。
如果您想要單獨引用該插件的功能，那麼您需要引用scrollspy.js 。 或者，正如Bootstrap插件概覽一章中所提到，您可以引用bootstrap.js或壓縮版的bootstrap.min.js 。
用法
您可以向頂部導航添加滾動監聽行為：
- 通過data屬性 ：向您想要監聽的元素（通常是body）添加data-spy="scroll"。 然後添加帶有Bootstrap.nav組件的父元素的ID或class的屬性data-target。 為了它能正常工作，您必須確保頁面主體中有匹配您所要監聽鏈接的ID 的元素存在。
<body data-spy="scroll" data-target=".navbar-example"> ... <div class="navbar-example"> <ul class="nav nav-tabs"> ... </ul> </div> ... </body>
- 通過JavaScript ：您可以通過JavaScript調用滾動監聽，選取要監聽的元素，然後調用.scrollspy()函數：
$('body').scrollspy({ target: '.navbar-example' })
實例
下面的實例演示了通過data 屬性使用滾動監聽（Scrollspy）插件：
實例
< nav id = " navbar-example " class = " navbar navbar-default navbar-static " role = " navigation " >
< div class = " container-fluid " >
< div class = " navbar-header " >
< button class = " navbar-toggle " type = " button " data-toggle = " collapse "
data-target = " .bs-js-navbar-scrollspy " >
< span class = " sr-only " > 切換導航 </ span >
< span class = " icon-bar " > </ span >
< span class = " icon-bar " > </ span >
< span class = " icon-bar " > </ span >
</ button >
< a class = " navbar-brand " href = " # " > 教程名稱 </ a >
</ div >
< div class = " collapse navbar-collapse bs-js-navbar-scrollspy " >
< ul class = " nav navbar-nav " >
< li > < a href = " #ios " > iOS </ a > </ li >
< li > < a href = " #svn " > SVN </ a > </ li >
< li class = " dropdown " >
< a href = " # " id = " navbarDrop1 " class = " dropdown-toggle "
data-toggle = " dropdown " > Java < b class = " caret " > </ b >
</ a >
< ul class = " dropdown-menu " role = " menu "
aria-labelledby = " navbarDrop1 " >
< li > < a href = " #jmeter " tabindex = " -1 " > jmeter </ a > </ li >
< li > < a href = " #ejb " tabindex = " -1 " > ejb </ a > </ li >
< li class = " divider " > </ li >
< li > < a href = " #spring " tabindex = " -1 " > spring </ a > </ li >
</ ul >
</ li >
</ ul >
</ div >
</ div >
</ nav >
< div data-spy = " scroll " data-target = " #navbar-example " data-offset = " 0 "
style = " height:200px;overflow:auto; position: relative; " >
< h4 id = " ios " > iOS </ h4 >
< p > iOS是一個由蘋果公司開發和發布的手機操作系統。 最初是於2007年首次發布iPhone、iPod Touch和Apple TV。 iOS派生自OS X，它們共享Darwin基礎。 OS X操作系統是用在蘋果電腦上，iOS是蘋果的移動版本。 </ p >
< h4 id = " svn " > SVN </ h4 >
< p > Apache Subversion，通常縮寫為SVN，是一款開源的版本控制系統軟件。 Subversion由CollabNet公司在2000年創建。 但是現在它已經發展為Apache Software Foundation的一個項目，因此擁有豐富的開發人員和用戶社區。 </ p >
< h4 id = " jmeter " > jMeter </ h4 >
< p > jMeter是一款開源的測試軟件。 它是100%純Java應用程序，用於負載和性能測試。 </ p >
< h4 id = " ejb " > EJB </ h4 >
< p > Enterprise Java Beans（EJB）是一個創建高度可擴展性和強大企業級應用程序的開發架構，部署在兼容應用程序服務器（比如JBOSS、Web Logic等）的J2EE上。 </ p >
< h4 id = " spring " > Spring </ h4 >
< p > Spring框架是一個開源的Java平台，為快速開發功能強大的Java應用程序提供了完備的基礎設施支持。 </ p >
< p > Spring框架最初是由Rod Johnson編寫的，在2003年6月首次發佈於Apache 2.0許可證下。 </ p >
</ div >
嘗試一下»
結果如下所示：
選項
通過data 屬性或JavaScript 來傳遞。 下表列出了這些選項：
| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
|---|---|---|---|
| offset | number 默认值：10 | data-offset | 当计算滚动位置时，距离顶部的偏移像素。 |
方法
.scrollspy('refresh') ：當通過JavaScript調用scrollspy方法時，您需要調用.refresh方法來更新DOM。這在DOM 的任意元素發生變更（即，您添加或移除了某些元素）時非常有用。 下面是使用該方法的語法。
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})
實例
下面的實例演示了.scrollspy('refresh')方法的用法：
實例
< nav id = " myScrollspy " class = " navbar navbar-default navbar-static " role = " navigation " >
< div class = " container-fluid " >
< div class = " navbar-header " >
< button class = " navbar-toggle " type = " button " data-toggle = " collapse "
data-target = " .bs-js-navbar-scrollspy " >
< span class = " sr-only " > 切換導航 </ span >
< span class = " icon-bar " > </ span >
< span class = " icon-bar " > </ span >
< span class = " icon-bar " > </ span >
</ button >
< a class = " navbar-brand " href = " # " > 教程名稱 </ a >
</ div >
< div class = " collapse navbar-collapse bs-js-navbar-scrollspy " >
< ul class = " nav navbar-nav " >
< li class = " active " > < a href = " #ios " > iOS </ a > </ li >
< li > < a href = " #svn " > SVN </ a > </ li >
< li class = " dropdown " >
< a href = " # " id = " navbarDrop1 " class = " dropdown-toggle "
data-toggle = " dropdown " > Java < b class = " caret " > </ b >
</ a >
< ul class = " dropdown-menu " role = " menu "
aria-labelledby = " navbarDrop1 " >
< li > < a href = " #jmeter " tabindex = " -1 " > jmeter </ a > </ li >
< li > < a href = " #ejb " tabindex = " -1 " > ejb </ a > </ li >
< li class = " divider " > </ li >
< li > < a href = " #spring " tabindex = " -1 " > spring </ a > </ li >
</ ul >
</ li >
</ ul >
</ div >
</ div >
</ nav >
< div data-spy = " scroll " data-target = " #myScrollspy " data-offset = " 0 "
style = " height:200px;overflow:auto; position: relative; " >
< div class = " section " >
< h4 id = " ios " > iOS < small > < a href = " # " onclick = " removeSection(this); " >
× 刪除該部分 </ a > </ small >
</ h4 >
< p > iOS是一個由蘋果公司開發和發布的手機操作系統。 最初是於2007年首次發布iPhone、iPod Touch和Apple TV。 iOS派生自OS X，它們共享Darwin基礎。 OS X操作系統是用在蘋果電腦上，iOS是蘋果的移動版本。 </ p >
</ div >
< div class = " section " >
< h4 id = " svn " > SVN < small > </ small > </ h4 >
< p > Apache Subversion，通常縮寫為SVN，是一款開源的版本控制系統軟件。 Subversion由CollabNet公司在2000年創建。 但是現在它已經發展為Apache Software Foundation的一個項目，因此擁有豐富的開發人員和用戶社區。 </ p >
</ div >
< div class = " section " >
< h4 id = " jmeter " > jMeter < small > < a href = " # " onclick = " removeSection(this); " >
× 刪除該部分 </ a > </ small >
</ h4 >
< p > jMeter是一款開源的測試軟件。 它是100%純Java應用程序，用於負載和性能測試。 </ p >
</ div >
< div class = " section " >
< h4 id = " ejb " > EJB </ h4 >
< p > Enterprise Java Beans（EJB）是一個創建高度可擴展性和強大企業級應用程序的開發架構，部署在兼容應用程序服務器（比如JBOSS、Web Logic等）的J2EE上。 </ p >
</ div >
< div class = " section " >
< h4 id = " spring " > Spring </ h4 >
< p > Spring框架是一個開源的Java平台，為快速開發功能強大的Java應用程序提供了完備的基礎設施支持。 </ p >
< p > Spring框架最初是由Rod Johnson編寫的，在2003年6月首次發佈於Apache 2.0許可證下。 </ p >
</ div >
</ div >
< script > $(function(){ removeSection = function(e) { $(e).parents(".section").remove(); $('[data-spy="scroll"]').each( function () { var $spy = $(this).scrollspy('refresh') }); } $("#myScrollspy").scrollspy(); }); </ script >
嘗試一下»
結果如下所示：
事件
下表列出了滾動監聽中要用到事件。 這些事件可在函數中當鉤子使用。
| 事件 | 描述 | 实例 |
|---|---|---|
| activate.bs.scrollspy | 每当一个新项目被滚动监听激活时，触发该事件。 |
$('#myScrollspy').on('activate.bs.scrollspy', function () {
// 执行一些动作...
})
|
實例
下面的實例演示了activate.bs.scrollspy事件的用法：
實例
< nav id = " myScrollspy " class = " navbar navbar-default navbar-static " role = " navigation " >
< div class = " container-fluid " >
< div class = " navbar-header " >
< button class = " navbar-toggle " type = " button " data-toggle = " collapse "
data-target = " .bs-js-navbar-scrollspy " >
< span class = " sr-only " > 切換導航 </ span >
< span class = " icon-bar " > </ span >
< span class = " icon-bar " > </ span >
< span class = " icon-bar " > </ span >
</ button >
< a class = " navbar-brand " href = " # " > 教程名稱 </ a >
</ div >
< div class = " collapse navbar-collapse bs-js-navbar-scrollspy " >
< ul class = " nav navbar-nav " >
< li class = " active " > < a href = " #ios " > iOS </ a > </ li >
< li > < a href = " #svn " > SVN </ a > </ li >
< li class = " dropdown " >
< a href = " # " id = " navbarDrop1 " class = " dropdown-toggle "
data-toggle = " dropdown " > Java < b class = " caret " > </ b >
</ a >
< ul class = " dropdown-menu " role = " menu "
aria-labelledby = " navbarDrop1 " >
< li > < a href = " #jmeter " tabindex = " -1 " > jmeter </ a > </ li >
< li > < a href = " #ejb " tabindex = " -1 " > ejb </ a > </ li >
< li class = " divider " > </ li >
< li > < a href = " #spring " tabindex = " -1 " > spring </ a > </ li >
</ ul >
</ li >
</ ul >
</ div >
</ div >
</ nav >
< div data-spy = " scroll " data-target = " #myScrollspy " data-offset = " 0 "
style = " height:200px;overflow:auto; position: relative; " >
< div class = " section " >
< h4 id = " ios " > iOS < small > < a href = " # " onclick = " removeSection(this); " >
× 刪除該部分 </ a > </ small >
</ h4 >
< p > iOS是一個由蘋果公司開發和發布的手機操作系統。 最初是於2007年首次發布iPhone、iPod Touch和Apple TV。 iOS派生自OS X，它們共享Darwin基礎。 OS X操作系統是用在蘋果電腦上，iOS是蘋果的移動版本。 </ p >
</ div >
< div class = " section " >
< h4 id = " svn " > SVN < small > </ small > </ h4 >
< p > Apache Subversion，通常縮寫為SVN，是一款開源的版本控制系統軟件。 Subversion由CollabNet公司在2000年創建。 但是現在它已經發展為Apache Software Foundation的一個項目，因此擁有豐富的開發人員和用戶社區。 </ p >
</ div >
< div class = " section " >
< h4 id = " jmeter " > jMeter < small > < a href = " # " onclick = " removeSection(this); " >
× 刪除該部分 </ a > </ small >
</ h4 >
< p > jMeter是一款開源的測試軟件。 它是100%純Java應用程序，用於負載和性能測試。 </ p >
</ div >
< div class = " section " >
< h4 id = " ejb " > EJB </ h4 >
< p > Enterprise Java Beans（EJB）是一個創建高度可擴展性和強大企業級應用程序的開發架構，部署在兼容應用程序服務器（比如JBOSS、Web Logic等）的J2EE上。 </ p >
</ div >
< div class = " section " >
< h4 id = " spring " > Spring </ h4 >
< p > Spring框架是一個開源的Java平台，為快速開發功能強大的Java應用程序提供了完備的基礎設施支持。 </ p >
< p > Spring框架最初是由Rod Johnson編寫的，在2003年6月首次發佈於Apache 2.0許可證下。 </ p >
</ div >
</ div >
< span id = " activeitem " style = " color:red; " > </ span >
< script > $(function(){ removeSection = function(e) { $(e).parents(".section").remove(); $('[data-spy="scroll"]').each( function () { var $spy = $(this).scrollspy('refresh') }); } $("#myScrollspy").scrollspy(); $('#myScrollspy').on('activate.bs. scrollspy', function () { var currentItem = $(".nav li.active > a").text(); $("#activeitem").html("目前您正在查看- " + currentItem); }) }); </ script >
嘗試一下»
結果如下所示：
更多實例
創建水平滾動監聽
以下實例演示瞭如何創建水平滾動監聽:
實例
<!-- The navbar: used to jump to a section in the scrollable area -->
< nav class= "navbar navbar-inverse navbar-fixed-top" >
...
< ul class= "nav navbar-nav" >
< li > < a href= "#section1" > Section 1 < /a > < /li >
...
< /nav >
<!-- The scrollable area -->
< div data-spy= "scroll" data-target= ".navbar" data-offset= "12" >
<!-- Section 1 -->
< div id= "section1" >
< h1 > Section 1 < /h1 >
< p > Try to scroll this page and look at the navigation bar while scrolling! < /p >
< /div >
...
< /div >
< nav class= "navbar navbar-inverse navbar-fixed-top" >
...
< ul class= "nav navbar-nav" >
< li > < a href= "#section1" > Section 1 < /a > < /li >
...
< /nav >
<!-- The scrollable area -->
< div data-spy= "scroll" data-target= ".navbar" data-offset= "12" >
<!-- Section 1 -->
< div id= "section1" >
< h1 > Section 1 < /h1 >
< p > Try to scroll this page and look at the navigation bar while scrolling! < /p >
< /div >
...
< /div >
嘗試一下»
如何創建垂直滾動監聽
以下實例演示瞭如何創建垂直滾動監聽:
實例
< body data-spy= "scroll" data-target= "#myScrollspy" data-offset= "20" >
< div class= "container" >
< div class= "row" >
< nav class= "col-sm-3" id= "myScrollspy" >
< ul class= "nav nav-pills nav-stacked" >
< li > < a href= "#section1" > Section 1 < /a > < /li >
...
< /ul >
< /nav >
< div class= "col-sm-9" >
< div id= "section1" >
< h1 > Section 1 < /h1 >
< p > Try to scroll this page and look at the navigation list while scrolling! < /p >
< /div >
...
< /div >
< /div >
< /div >
< /body >
< div class= "container" >
< div class= "row" >
< nav class= "col-sm-3" id= "myScrollspy" >
< ul class= "nav nav-pills nav-stacked" >
< li > < a href= "#section1" > Section 1 < /a > < /li >
...
< /ul >
< /nav >
< div class= "col-sm-9" >
< div id= "section1" >
< h1 > Section 1 < /h1 >
< p > Try to scroll this page and look at the navigation list while scrolling! < /p >
< /div >
...
< /div >
< /div >
< /div >
< /body >
嘗試一下»