滚动监听

优质

小牛编辑

141浏览

2023-12-01

导航条示例

滚动监听插件会根据滚动的位置，自动更新导航条的目标。滚动在导航条下面的区域，查看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…
})