Bootstrap Scrollspy 插件（高级）

Scrollspy 插件

Scrollspy 插件用于根据滚动位置自动更新导航列表中的链接。

如何创建滚动间谍

以下示例展示了如何创建滚动间谍：

示例

<body data-spy="scroll" data-target=".navbar" data-offset="50">


<nav class="navbar navbar-inverse navbar-fixed-top">
...
<ul class="nav navbar-nav">
    <li><a href="#section1">Section 1</a></li>
    ...
</nav>


<div id="section1">
  <h1>Section 1</h1>
  <p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...

</body>

亲自试一试 »

示例解释

添加data-spy="scroll"到应该用作可滚动区域的元素（通常是<body>元素）。

然后添加data-target属性的值为导航栏的 id 或类名 (.navbar）。这是为了确保导航栏与可滚动区域连接。

请注意，可滚动元素必须与导航栏列表项内的链接 ID 匹配（<div id="section1">火柴<a href="#section1">）。

可选的data-offset属性指定计算滚动位置时从顶部偏移的像素数。当您觉得导航栏中的链接在跳转到可滚动元素时太快或太早改变活动状态时，这非常有用。默认值为 10 像素。

需要相对定位：data-spy="scroll" 的元素需要 CSS位置属性，值为 "relative" 才能正常工作。

滚动监视垂直菜单

在这个例子中，我们使用 Bootstrap 的垂直导航丸作为菜单：

示例

<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">

<div class="container">
    <div class="row">
      <nav class="col-sm-3" id="myScrollspy">
        <ul class="nav nav-pills nav-stacked">
          <li><a href="#section1">Section 1</a></li>
          ...
        </ul>
      </nav>
      <div class="col-sm-9">
        <div id="section1">
          <h1>Section 1</h1>
          <p>Try to scroll this page and look at the navigation list while scrolling!</p>
        </div>
        ...
      </div>
    </div>
</div>

</body>

亲自试一试 »

完整的 Bootstrap Scrollspy 参考

有关所有滚动监视方法和事件的完整参考，请访问我们的Bootstrap JS Scrollspy 参考。