• 滚动监听(Scrollspy)
    • 运行原理
    • 在navbar导航中的示例
    • 嵌套的导航示例
    • 列表组示例
    • 用法
      • 通过数据属性
      • 通过 JavaScript
        • 需要可分辨（明确）的ID目标
        • 忽略非:visible 目标元素
      • 方法
        • .scrollspy('refresh')
      • .scrollspy('dispose')
      • 选项
      • 事件

    滚动监听(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. })