滚动监听(Scrollspy)

滚动监听插件会根据滚动的位置，自动更新导航条的目标，以指示当前窗口中处于活动的状态（滚动在导航条下面的区域，查看active类的改变。弹出菜单的子项也同样会被高亮）。

运行原理

Scrollspy滑动监控组件正常运行的几个要点:

  • 如果从源代码构建JS，请 包括 util.js。
  • 它必须在Bootstrap nav 导航组年 或 list group列表组上使用。
  • Scrollspy 需要在你监控的元素上使用 position: relative; ，通常是 <body>。
  • 当需要对 <body>以外的元素进行监控时，请确保具有 height 高度值和 overflow-y: scroll; 属性。
  • 锚点 (<a>)是必须的，并且必须指向一个id上。

实施成功后，你的导航或列表群组将相应地更新，根据 .active 关联的目标，从一个项目移到另一个项目。

在navbar导航中的示例

滚动导航栏下方的区域，并观看活动列表的变化，下拉项目也会突出显示，如下例所示：

滚动监听(Scrollspy) - 图1

  1. <nav id="navbar-example2" class="navbar navbar-light bg-light">
  2.   <a class="navbar-brand" href="#">Navbar</a>
  3.   <ul class="nav nav-pills">
  4.     <li class="nav-item">
  5.       <a class="nav-link" href="#fat">@fat</a>
  6.     </li>
  7.     <li class="nav-item">
  8.       <a class="nav-link" href="#mdo">@mdo</a>
  9.     </li>
  10.     <li class="nav-item dropdown">
  11.       <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
  12.       <div class="dropdown-menu">
  13.         <a class="dropdown-item" href="#one">one</a>
  14.         <a class="dropdown-item" href="#two">two</a>
  15.         <div role="separator" class="dropdown-divider"></div>
  16.         <a class="dropdown-item" href="#three">three</a>
  17.       </div>
  18.     </li>
  19.   </ul>
  20. </nav>
  21. <div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
  22.   <h4 id="fat">@fat</h4>
  23.   <p>...</p>
  24.   <h4 id="mdo">@mdo</h4>
  25.   <p>...</p>
  26.   <h4 id="one">one</h4>
  27.   <p>...</p>
  28.   <h4 id="two">two</h4>
  29.   <p>...</p>
  30.   <h4 id="three">three</h4>
  31.   <p>...</p>
  32. </div>

嵌套的导航示例

Scrollspy滚动监控也适用于嵌套的 .nav。如果是一个嵌套. .nav是的.active状态，其父母也将是.active状态。滚动导航栏旁边的区域，并观看活动班级更改，如下例：

滚动监听(Scrollspy) - 图2

  1. <nav id="navbar-example3" class="navbar navbar-light bg-light">
  2.   <a class="navbar-brand" href="#">Navbar</a>
  3.   <nav class="nav nav-pills flex-column">
  4.     <a class="nav-link" href="#item-1">Item 1</a>
  5.     <nav class="nav nav-pills flex-column">
  6.       <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
  7.       <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
  8.     </nav>
  9.     <a class="nav-link" href="#item-2">Item2</a>
  10.     <a class="nav-link" href="#item-3">Item3</a>
  11.     <nav class="nav nav-pills flex-column">
  12.       <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
  13.       <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
  14.     </nav>
  15.   </nav>
  16. </nav>
  18. <div data-spy="scroll" data-target="#navbar-example3" data-offset="0">
  19.   <h4 id="item-1">Item 1</h4>
  20.   <p>...</p>
  21.   <h5 id="item-1-1">Item 1-1</h5>
  22.   <p>...</p>
  23.   <h5 id="item-1-2">Item 2-2</h5>
  24.   <p>...</p>
  25.   <h4 id="item-2">Item 2</h4>
  26.   <p>...</p>
  27.   <h4 id="item-3">Item 3</h4>
  28.   <p>...</p>
  29.   <h5 id="item-3-1">Item 3-1</h5>
  30.   <p>...</p>
  31.   <h5 id="item-3-2">Item 3-2</h5>
  32.   <p>...</p>
  33. </div>

列表组示例

Scrollspy 滚动监听也适用于 .list-group列表组，请滚动列表组旁边的区域，观看活动列表的变更：

滚动监听(Scrollspy) - 图3

  1. <div id="list-example" class="list-group">
  2.   <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
  3.   <a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a>
  4.   <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
  5.   <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
  6. </div>
  7. <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
  8.   <h4 id="list-item-1">Item 1</h4>
  9.   <p>...</p>
  10.   <h4 id="list-item-2">Item 2</h4>
  11.   <p>...</p>
  12.   <h4 id="list-item-3">Item 3</h4>
  13.   <p>...</p>
  14.   <h4 id="list-item-4">Item 4</h4>
  15.   <p>...</p>
  16. </div>

用法

通过数据属性

要轻松添加滚动行为到您的顶栏导航，添加 data-spy="scroll"到您要窥探的元素（通常是<body>）。然后添加data-target属性到任何Bootstrap .nav组件的父元素ID或类的Class属性。

  1. body {
  2.   position: relative;
  3. }
  1. <body data-spy="scroll" data-target="#navbar-example">
  2.   ...
  3.   <div id="navbar-example">
  4.     <ul class="nav nav-tabs" role="tablist">
  5.       ...
  6.     </ul>
  7.   </div>
  8.   ...
  9. </body>

通过 JavaScript

在你的CSS加上 position: relative; ，通过JavaScript调用滚动监控:

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

需要可分辨（明确）的ID目标

Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>.

忽略非:visible 目标元素

目标元素如果是非 :visible ，在jQuery中将被忽略，其它相对应的导航组永远不会被突出显示。

方法

.scrollspy('refresh')

当从DOM加入或删除元素使用滚动监控时，你需要调用刷新方式，如下所示：

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

.scrollspy('dispose')

销毁一个滚动元素。

选项

选项可以通过数据属性或JavaScript传递。对于数据属性，请将选项名称附加到 data-,如 data-offset=""。

名称Type类型默认值描述
offsetnumber10计算滚动位置时，从顶部开始的计算的像偏移距离。

事件

Event事件类型描述
activate.bs.scrollspy每当新项目被滚动激活时，该事件就会在滚动元素上触发。
  1. $('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  2.   // do something…
  3. })