5、滾動監聽（scrollspy.js） · Bootstrap前端響應式框架學習技術分享總結

## 滾動監聽 scrollspy.js 滾動監聽插件是用來根據滾動條所處的位置來自動更新導航項的。如下所示，滾動導航條下面的區域并關注導航項的變化。下拉菜單中的條目也會自動高亮顯示。 **用法** 注意： * 依賴 Bootstrap 的導航組件滾動監聽插件依賴 Bootstrap 的導航組件用于高亮顯示當前激活的鏈接。 * 導航欄鏈接必須有可解析的id目標。例如，\<a href=“#home”\>home\</a\>必須對應于DOM中的某些內容，如\<div id=“home”\>\</div\>。 **1.** 需要相對定位（relative positioning）滾動監聽都需要被監聽的組件是`position: relative;`即相對定位方式。一般我們監聽的都是`body`，所以直接給body一個`相對定位`。 **2.** 通過 data 屬性調用將data-spy=“scroll”添加到要監視的元素（最典型的是<body>）。然后使用任何Bootstrap.nav組件的父元素的ID或類添加datatarget屬性。如下： ~~~css body { position: relative; } ~~~ ~~~html <body data-spy="scroll" data-target="#navbar-example"> ... <div id="navbar-example"> <ul class="nav nav-tabs" role="tablist"> ... </ul> </div> ... </body> ~~~ **3.** 通過 JavaScript 調用在 CSS 中添加`position: relative;`之后，通過 JavaScript 代碼啟動滾動監聽插件 ~~~js $('body').scrollspy({ target: '#navbar-example' }) ~~~ ***** **方法** 當使用滾動監聽插件的同時在 DOM 中添加或刪除元素后，需要像下面這樣調用刷新（ refresh）方法： ~~~js $('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') }) ~~~ ***** **參數** 可以通過 data 屬性或 JavaScript 傳遞參數。對于 data 屬性，其名稱是將參數名附著到`data-`后面組成，例如`data-offset=""`。 | 名稱 | 類型 | 默認值 | 描述 | | --- | --- | --- | --- | | offset | number | 10 | 計算滾動位置時相對于頂部的偏移量（像素數）。 | ***** **事件** | 事件類型 | 描述 | | --- | --- | | activate.bs.scrollspy | 每當一個新條目被激活后都將由滾動監聽插件觸發此事件。 | ~~~js $('#myScrollspy').on('activate.bs.scrollspy', function () { // do something… }) ~~~