在 Bootstrap 4 中，滚动监听（Scrollspy） 是一个非常有用的功能，它允许你根据页面的滚动位置动态更新页面元素的状态。最常见的用途是在导航栏中实现滚动效果，使得页面内容的不同部分与导航栏链接对应，当用户滚动页面时，导航栏中的链接会高亮显示，指示当前视图所在的部分。

1. 启用 Scrollspy

要启用 Scrollspy 功能，通常需要以下几个步骤：

  1. 为容器（例如 body 或其他元素）添加 data-spy="scroll" 属性。
  2. 设置 data-target 属性，指定要监控的目标（通常是导航栏）。
  3. 使用 offset 配置选项（可选）来定义页面顶部的偏移量。

2. 基本示例：页面滚动时更新导航栏

HTML 示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 4 Scrollspy Example</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body data-spy="scroll" data-target="#navbar" data-offset="50">
  <!-- 导航栏 -->
  <nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <a class="navbar-brand" href="#">Scrollspy Example</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#section1">Section 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section2">Section 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section3">Section 3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section4">Section 4</a>
        </li>
      </ul>
    </div>
  </nav>

  <!-- 页面内容 -->
  <div id="section1" class="container" style="height: 500px; margin-top: 70px;">
    <h2>Section 1</h2>
    <p>This is the first section.</p>
  </div>

  <div id="section2" class="container" style="height: 500px;">
    <h2>Section 2</h2>
    <p>This is the second section.</p>
  </div>

  <div id="section3" class="container" style="height: 500px;">
    <h2>Section 3</h2>
    <p>This is the third section.</p>
  </div>

  <div id="section4" class="container" style="height: 500px;">
    <h2>Section 4</h2>
    <p>This is the fourth section.</p>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

解释：

  • data-spy="scroll"：启用滚动监听功能。
  • data-target="#navbar"：指定监控目标元素（在这个例子中是导航栏 #navbar），Scrollspy 会根据页面的滚动位置来更新导航栏中对应的链接。
  • data-offset="50"：定义偏移量，使得页面滚动时顶部的元素被认为是可见的（避免导航栏遮挡内容）。

3. Scrollspy 机制

当页面滚动时，Scrollspy 会监听每个目标元素（即导航链接的目标位置）与当前视口的位置关系。一旦某个目标元素进入视口，Scrollspy 会更新导航栏中的链接样式，使之高亮显示。

4. 自定义滚动监听效果

你还可以使用 JavaScript 来初始化和自定义滚动监听的行为，以下是如何通过 JavaScript 启用 Scrollspy 的方式：

示例：使用 JavaScript 初始化 Scrollspy

<script>
  $(document).ready(function () {
    $('body').scrollspy({
      target: '#navbar',
      offset: 50
    });
  });
</script>

5. 自定义滚动监听偏移量（offset）

如果页面中有固定的导航栏，滚动时你可能需要稍微调整触发的滚动位置。offset 属性可以帮助你设置滚动偏移量，确保当页面滚动到某个位置时，内容能够正确地与导航栏项对应。

示例：自定义偏移量

<body data-spy="scroll" data-target="#navbar" data-offset="100">

在这个例子中，滚动条的偏移量设置为 100px，这意味着当页面滚动到目标元素顶部距离页面顶部 100px 时，Scrollspy 会触发更新。

6. Scrollspy 的高级使用

Scrollspy 不仅可以帮助你高亮显示导航栏中的链接，还可以与 affix 或其他类似的功能一起使用，创建更复杂的页面交互体验。例如，你可以在滚动到某个部分时触发不同的动画效果或加载其他内容。

示例：使用 affix 创建固定导航栏

<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light fixed-top" data-spy="scroll" data-target="#navbar" data-offset="50">
  <!-- 导航内容 -->
</nav>

此时，导航栏将始终固定在页面的顶部，并在滚动过程中进行更新。

总结

  • Scrollspy 是一个可以帮助你根据页面滚动位置动态更新导航栏状态的功能，特别适用于单页应用（SPA）和长页面。
  • 要启用 Scrollspy，你需要设置 data-spy="scroll" 和 data-target 属性，并且通常使用 offset 来设置偏移量。
  • 你可以使用 JavaScript 来初始化或自定义 Scrollspy。
  • Scrollspy 还可以与其他功能结合使用，如 affix，以实现更复杂的滚动监听效果。