滚动监听
导航条示例
滚动监听插件会根据滚动的位置，自动更新导航条的目标。滚动在导航条下面的区域，查看active类的改变。弹出菜单的子项也同样会被高亮。
用法
需要Bootstrap导航条
Scrollspy currently requires the use of a Bootstrap nav component for proper highlighting of active links.
滚动监听现在需要用到Bootstrap nav 组件 以适当地高亮激活的链接。
需要相对位置
无论如何应用这个方法，滚动监听需要在你要监听的元素上用position:relative;。在多数情况下，这个需要监听的元素就是<body>。当在除了<body>之外的元素上进行滚动监听时，请确保应用了一个height设置以及overflow-y:scroll;。
利用data属性
要想方便地在你的顶部导航条上添加滚动监听，请在你想监听的元素上添加data-spy="scroll"（最典型的就是<body>）。然后添加data-target属性，属性值是任何Bootstrap.nav组件的父元素的ID或类。
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>利用JavaScript
在你的CSS中添加了position: relative;之后，利用JavaScript调用滚动监听：
$('body').scrollspy({ target: '#navbar-example' })需要可解析的ID目标
导航条链接必须拥有可解析的ID目标。举个例子，一个<a href="#home">home</a>链接必须有与其对应的DOM元素，比如说<div></div>。
不可见的目标元素会被忽略
不可见的目标元素:visible according to jQuery会被忽略，而且它们相应的导航项就远不会被高亮。
方法
.scrollspy(‘refresh’)
在使用滚动监听的同时，如果在DOM中添加或移除了元素，你需要调用刷新方法，如下所示：
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})选项
可以利用data属性或者JavaScript传递选项。如果用data属性，请把选项名追加到data-后面，比如说写成data-offset=""。
| 名称 | 类型 | 默认值 | description |
|---|---|---|---|
| offset | number | 10 | 从顶部滚下来多少像素开始计算位置 |
事件
| 事件类型 | 描述 |
|---|---|
| activate.bs.scrollspy | 当一个新项被滚动监听激活时，会触发该事件。 |
$('#myScrollspy').on('activate.bs.scrollspy', function () {
// do something…
})如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论