捲動間諜

根據捲動位置自動更新 Bootstrap 導覽或清單群組元件，以指示目前在視窗中哪個連結處於活動狀態。

此頁面

運作方式

當錨點 (<a>) 元素的 href 所引用的 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> 的內容。
不可見的目標元素將會被忽略。請參閱以下不可見元素區段。

範例

捲動導覽列下方的區域，並觀察 active 類別的變化。開啟下拉式功能表，並觀察下拉式項目也會被突顯。

第一個標題

這是捲軸頁面的一些佔位符內容。請注意，當您向下捲動頁面時，會突出顯示適當的導覽連結。它會在整個元件範例中重複出現。我們會繼續在此處新增一些範例文字，以強調捲動和突出顯示。

第二個標題

第三個標題

第四個標題

第五個標題

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