Bootstrap JavaScript插件：滚动监听 (scrollspy.js)
仲孙华奥
作者:
WangMin
格言:努力做好自己喜欢的每一件事
CSDN原创文章
博客地址 WangMin
滚动监听插件是用来根据滚动条所处的位置来自动更新导航项的。如下所示，滚动导航条下面的区域并关注导航项的变化。下拉菜单中的条目也会自动高亮显示。
用法
注意：
- 依赖 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”添加到要监视的元素（最典型的是）。然后使用任何Bootstrap.nav组件的父元素的ID或类添加datatarget属性。如下：
body {
position: relative;
}
<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 代码启动滚动监听插件
$('body').scrollspy({ target: '#navbar-example' })
方法
当使用滚动监听插件的同时在 DOM 中添加或删除元素后，需要像下面这样调用刷新（ refresh） 方法：
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})
参数
可以通过 data 属性或 JavaScript 传递参数。对于 data 属性，其名称是将参数名附着到data-后面组成，例如data-offset=""。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| offset | number | 10 | 计算滚动位置时相对于顶部的偏移量（像素数）。 |
事件
| 事件类型 | 描述 |
|---|---|
| activate.bs.scrollspy | 每当一个新条目被激活后都将由滚动监听插件触发此事件。 |
$('#myScrollspy').on('activate.bs.scrollspy', function () {
// do something…
})
就先分享到这里!! 后续继续更新!!
类似资料：