滚动间谍

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

怎么运行的

¥How it works

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

¥Scrollspy toggles the .active class on anchor (<a>) elements when the element with the id referenced by the anchor’s href is scrolled into view. Scrollspy is best used in conjunction with a Bootstrap nav component or list group, but it will also work with any anchor elements in the current page. Here’s how it works.

首先，scrollspy 需要两件事：导航、列表组或一组简单的链接，以及可滚动容器。可滚动容器可以是 <body> 或具有 height 和 overflow-y: scroll 集的自定义元素。

¥To start, scrollspy requires two things: a navigation, list group, or a simple set of links, plus a scrollable container. The scrollable container can be the <body> or a custom element with a set height and overflow-y: scroll.
在可滚动容器上，添加 data-bs-spy="scroll" 和 data-bs-target="#navId"，其中 navId 是关联导航的唯一 id。如果元素内没有可聚焦元素，请确保还包含 tabindex="0" 以确保键盘访问。

¥On the scrollable container, add data-bs-spy="scroll" and data-bs-target="#navId" where navId is the unique id of the associated navigation. If there is no focusable element inside the element, be sure to also include a tabindex="0" to ensure keyboard access.
滚动“spied”容器时，会在关联导航中的锚链接中添加和删除 .active 类。链接必须具有可解析的 id 目标，否则将被忽略。例如，<a href="#home">home</a> 必须对应于 DOM 中的某些内容，如 <div id="home"></div>

¥As you scroll the “spied” container, an .active class is added and removed from anchor links within the associated navigation. Links must have resolvable id targets, otherwise they’re ignored. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>
不可见的目标元素将被忽略。请参阅下面的不可见元素部分。

¥Target elements that are not visible will be ignored. See the Non-visible elements section below.

示例

¥Examples

导航栏

¥Navbar

滚动导航栏下方的区域并观察活动类的变化。打开下拉菜单并观察下拉菜单项也被高亮。

¥Scroll the area below the navbar and watch the active class change. Open the dropdown menu and watch the dropdown items be highlighted as well.

First heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Second heading

Third heading

Fourth heading

Fifth heading

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

嵌套导航

¥Nested nav

Scrollspy 也适用于嵌套 .nav。如果嵌套的 .nav 是 .active，那么它的父级也将是 .active。滚动导航栏旁边的区域并观察活动类的变化。

¥Scrollspy also works with nested .navs. If a nested .nav is .active, its parents will also be .active. Scroll the area next to the navbar and watch the active class change.