捲軸間諜

根據滾動位置自動更新 Bootstrap 導航或列表組組件，以指示當前在視口中哪個鏈接處於活動狀態。

在本頁面

這個怎麼運作

當具有錨點引用的元素滾動到視圖中時， Scrollspy 會切換.active錨點 ( <a>) 元素上的類。Scrollspy 最好與 Bootstrap導航組件或列表組一起使用，但它也可以與當前頁面中的任何錨元素一起使用。這是它的工作原理。idhref

首先，scrollspy 需要兩件東西：導航、列表組或一組簡單的鏈接，外加一個可滾動的容器。可滾動容器可以是<body>或帶有集合height和的自定義元素overflow-y: scroll。
在可滾動容器上，添加關聯導航的唯一性data-bs-spy="scroll"和data-bs-target="#navId"位置。確保還包括一個以確保鍵盤訪問。navIdidtabindex="0"
當您滾動“間諜”容器時，.active會在關聯導航中的錨鏈接中添加和刪除一個類。鏈接必須具有可解析的id目標，否則將被忽略。例如，a<a href="#home">home</a>必須對應於 DOM 中的某些內容，例如<div id="home"></div>
不可見的目標元素將被忽略。請參閱下面的不可見元素部分。

例子

滾動導航欄下方的區域並觀察活動類的變化。打開下拉菜單並觀察下拉項目是否也被突出顯示。

第一個標題

這是 scrollspy 頁面的一些佔位符內容。請注意，當您向下滾動頁面時，相應的導航鏈接會突出顯示。它在整個組件示例中重複出現。我們在這裡不斷添加更多示例副本以強調滾動和突出顯示。

第二個標題

第三個標題

第四標題

第五標題

<nav id="navbar-example2" class="navbar bg-light 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-light 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>