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"，才能正常工作。
