滚动监听

根据滚动位置自动更新 Bootstrap 导航或列表组组件，以指示哪个链接当前在视口中处于活动状态。

在此页

怎么运行的

当具有锚点引用的元素滚动到视图中时， Scrollspy 会切换.active锚点 ( <a>) 元素上的类。Scrollspy 最好与 Bootstrap导航组件或列表组结合使用，但它也可以与当前页面中的任何锚元素一起使用。这是它的工作原理。idhref

首先，scrollspy 需要两件事：导航、列表组或一组简单的链接，以及一个可滚动的容器。可滚动容器可以是 the<body>或带有 setheight和的自定义元素overflow-y: scroll。
在可滚动容器上，添加关联导航data-bs-spy="scroll"的data-bs-target="#navId"唯一navId性。id确保还包括一个tabindex="0"以确保键盘访问。
当您滚动“spied”容器时，.active会在相关导航中的锚链接中添加和删除一个类。链接必须有可解析的id目标，否则它们将被忽略。例如，a<a href="#home">home</a>必须对应于 DOM 中的某些内容，例如<div id="home"></div>
不可见的目标元素将被忽略。请参阅下面的不可见元素部分。

例子

滚动导航栏下方的区域并观察活动类的变化。打开下拉菜单并观察下拉项也突出显示。

第一个标题

这是 scrollspy 页面的一些占位符内容。请注意，当您向下滚动页面时，相应的导航链接会突出显示。它在整个组件示例中重复出现。我们不断在此处添加更多示例副本以强调滚动和突出显示。

第二标题

第三标题

第四个标题

第五标题

<nav id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading1">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading2">Second</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
        <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
      </ul>
    </li>
  </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0">
  <h4 id="scrollspyHeading1">First heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading2">Second heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading3">Third heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading4">Fourth heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading5">Fifth heading</h4>
  <p>...</p>
</div>