Bootstrap 5 Scrollspy

Scrollspy

Scrollspy 用于根據滾動位置自動更新導航列表中的鏈接。

如何創建 Scrollspy

下例展示如何創建 Scrollspy：

實例

<!-- 可滾動區域 -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- 導航欄 - <a> 元素用于跳轉到可滾動區域中的某個部分 -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
  <ul class="navbar-nav">
    <li><a href="#section1">Section 1</a></li>
    ...
</nav>
<!-- Section 1 -->
<div id="section1">
  <h1>Section 1</h1>
  <p>請嘗試滾動此頁面并在滾動時查看導航欄！</p>
</div>
...
</body>

親自試一試

例子解釋

將 data-bs-spy="scroll" 添加到用作可滾動區域的元素（通常是 <body> 元素）。

然后添加 data-bs-target 屬性，其值為 id 或導航欄的類名（.navbar）。這是為了確保導航欄與可滾動區域相連。

請注意，可滾動元素必須與導航欄列表項內的鏈接 ID 匹配（<div id="section1"> 匹配 <a href="#section1">）。

可選的 data-bs-offset 屬性規定在計算滾動位置時從頂部偏移的像素數。當導航欄中的鏈接在跳轉到可滾動元素時，如果您感覺過早更改了活動狀態時，這很有用。默認值為 10 像素。

需要相對定位：帶有 data-bs-spy="scroll" 的元素需要 CSS position 屬性的值設置為 "relative" 才能正常工作。