滚动间谍

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

此页面上的内容

工作原理

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

首先，scrollspy 需要两样东西：导航、列表组或一组简单的链接，以及一个可滚动容器。可滚动容器可以是 <body> 或具有设置的 height 和 overflow-y: scroll 的自定义元素。
在可滚动容器上，添加 data-bs-spy="scroll" 和 data-bs-target="#navId"，其中 navId 是关联导航的唯一 id。如果元素内部没有可聚焦元素，请务必同时包含 tabindex="0" 以确保键盘访问。
当您滚动“监视”容器时，关联导航中的锚点链接会添加和删除 .active 类。链接必须具有可解析的 id 目标，否则将被忽略。例如，<a href="#home">home</a> 必须对应于 DOM 中的类似内容 <div id="home"></div>
将忽略不可见的元素。请参阅下面的不可见元素部分。

示例

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

第一标题

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

第二标题

第三标题

第四标题

第五标题

<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>