## 滾動監聽 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…
})
~~~
- 第一章 . bootstrap介紹
- 第二章 . 全局CSS樣式
- 1、總體注意事項
- 2、柵格系統
- 3、排版
- 4、代碼
- 5、表格
- 6、表單
- 7、 按鈕
- 8、 圖片
- 9、輔助類
- 10、響應式工具
- 第三章 . bootstrap相關CSS應用
- 1、CSS媒體查詢 @media
- 2、px,em,rem之間的關系和換算方式
- 第四章 . 組件
- 1、Glyphicons 字體圖標
- 2、下拉菜單
- 3、按鈕組
- 4、按鈕式下拉菜單
- 5、輸入框組
- 6、導航
- 7、導航條
- 8、路徑導航
- 9、分頁
- 10、標簽
- 11、徽章
- 12、巨幕
- 13、頁頭
- 14、縮略圖
- 15、警告框
- 16、進度條
- 17、媒體對象
- 18、列表組
- 19、面版
- 20、Well
- 第五章 . JavaScript 插件
- 1、JavaScript 插件引入前提
- 2、過渡效果 (transition.js)
- 3、模態框 (modal.js)
- 4、下拉菜單 (dropdown.js)
- 5、滾動監聽 (scrollspy.js)
- 6、可切換標簽 (tab.js)
- 7、工具提示 (tooltip.js)
- 8、彈出框 (popover.js)
- 9、警告信息 (alert.js)
- 10、按鈕 (button.js)
- 11、折疊插件(collapse.js)
- 12、輪播插件(carousel.js)
- 13、Affix插件(affix.js)