Bootstrap 5教程
/ Scrollspy
Scrollspy
Scrollspy
Scrollspy 用于根據(jù)滾動(dòng)位置自動(dòng)更新導(dǎo)航列表中的鏈接。
如何創(chuàng)建 Scrollspy
下例展示如何創(chuàng)建 Scrollspy：
實(shí)例
<!-- 可滾動(dòng)區(qū)域 -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- 導(dǎo)航欄 - <a> 元素用于跳轉(zhuǎn)到可滾動(dòng)區(qū)域中的某個(gè)部分 -->
<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>請(qǐng)嘗試滾動(dòng)此頁(yè)面并在滾動(dòng)時(shí)查看導(dǎo)航欄！</p>
</div>
...
</body>
例子解釋
將 data-bs-spy="scroll" 添加到用作可滾動(dòng)區(qū)域的元素（通常是 <body> 元素）。
然后添加 data-bs-target 屬性，其值為 id 或?qū)Ш綑诘念?lèi)名（.navbar）。這是為了確保導(dǎo)航欄與可滾動(dòng)區(qū)域相連。
請(qǐng)注意，可滾動(dòng)元素必須與導(dǎo)航欄列表項(xiàng)內(nèi)的鏈接 ID 匹配（<div id="section1"> 匹配 <a href="#section1">）。
可選的 data-bs-offset 屬性規(guī)定在計(jì)算滾動(dòng)位置時(shí)從頂部偏移的像素?cái)?shù)。當(dāng)導(dǎo)航欄中的鏈接在跳轉(zhuǎn)到可滾動(dòng)元素時(shí)，如果您感覺(jué)過(guò)早更改了活動(dòng)狀態(tài)時(shí)，這很有用。默認(rèn)值為 10 像素。
需要相對(duì)定位：帶有 data-bs-spy="scroll" 的元素需要 CSS position 屬性的值設(shè)置為 "relative" 才能正常工作。