Bootstrap 滚动监听（Scrollspy）插件

滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。

如果您想要单独引用该插件的功能，那么您需要引用 scrollspy.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

用法

您可以向顶部导航添加滚动监听行为：

• 通过 data 属性：向您想要监听的元素（通常是 body）添加 data-spy="scroll"。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。为了它能正常工作，您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。

  <body data-spy="scroll" data-target=".navbar-example">
  ...
  <div class="navbar-example">
      <ul class="nav nav-tabs">
          ...
      </ul>
  </div>
  ...
  </body>
  

• 通过 JavaScript：您可以通过 JavaScript 调用滚动监听，选取要监听的元素，然后调用 .scrollspy() 函数：

  $('body').scrollspy({ target: '.navbar-example' })
  

实例

下面的实例演示了通过 data 属性使用滚动监听（Scrollspy）插件：

结果如下所示：

选项

通过 data 属性或 JavaScript 来传递。下表列出了这些选项：

方法

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

实例

下面的实例演示了 .scrollspy('refresh') 方法的用法：

结果如下所示：

事件

下表列出了滚动监听中要用到事件。这些事件可在函数中当钩子使用。

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // 执行一些动作...
})

实例

下面的实例演示了 activate.bs.scrollspy 事件的用法：

结果如下所示：

更多实例

创建水平滚动监听

以下实例演示了如何创建水平滚动监听:

如何创建垂直滚动监听

以下实例演示了如何创建垂直滚动监听: