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… }) ~~~