Bootstrap Scrollspy (滚动式)

定义和使用

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

以下示例显示如何创建 scrollspy：

// 可滚动区域
<body data-spy="scroll" data-target=".navbar" data-offset="50">
/ /导航栏-<a>元素用于跳转到可滚动区域中的某个部分
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  ...
    <ul class="navbar-nav">
      <li><a href="#section1">Section 1</a></li>
      ...
  </nav>
  
  // Section 1 
  <div id="section1">
    <h1>Section 1</h1>
    <p>尝试滚动此页面，并在滚动时查看导航栏！</p>
  </div>
  ...
</body>

尝试一下

输出结果如下：

示例说明

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

然后，为数据目标属性添加id的值或导航栏（.navbar）的类名。这是为了确保导航栏与可滚动区域连接。

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

可选的 data-offset 属性指定计算滚动位置时要从顶部偏移的像素数；当您觉得导航栏内的链接在跳转到可滚动元素时过早或过早更改活动状态时，此功能很有用；默认值为10像素。

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

Scrollspy 垂直菜单

在此示例中，我们使用 Bootstrap 的垂直导航药丸作为菜单：

<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
  <div class="container-fluid">
    <div class="row">
      <nav class="col-sm-3 col-4" id="myScrollspy">
        <ul class="nav nav-pills flex-column">
          <li class="nav-item">
            <a class="nav-link active" href="#section1">Section 1</a>
          </li>
          ...
        </ul>
      </nav>
      <div class="col-sm-9 col-8">
        <div id="section1">
          <h1>Section 1</h1>
          <p>尝试滚动此页面，并在滚动时查看菜单！</p>
        </div>
        ...
      </div>
    </div>
  </div>
</body>