Bootstrap 5 Scrollspy
Bootstrap 2023-08-10 09:26:54小码哥的IT人生shichen
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>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
body {
position: relative;
}
</style>
</head>
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">第一回</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">第二回</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">第三回</a>
</li>
</ul>
</div>
</nav>
<div id="section1" class="container-fluid bg-success text-white" style="padding:100px 20px;">
<h1>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h1>
<p>话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉。汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃共相辅佐。时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。</p>
<p>建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起。只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十余丈，飞入温德殿中。秋七月，有虹现于玉堂；五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。</p>
<p>...</p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding:100px 20px;">
<h1>第二回 张翼德怒鞭督邮 何国舅谋诛宦竖</h1>
<p>且说董卓字仲颖，陇西临洮人也，官拜河东太守，自来骄傲。当日怠慢了玄德，张飞性发，便欲杀之。玄德与关公急止之曰；“他是朝廷命官，岂可擅杀？”飞曰：“若不杀这厮，反要在他部下听令，其实不甘！二兄要便住在此，我自投别处去也！”玄德曰：“我三人义同生死，岂可相离？不若都投别处去便了。”飞曰：“若如此，稍解吾恨。”</p>
<p>于是三人连夜引军来投朱儁。儁待之甚厚，合兵一处，进讨张宝。是时曹操自跟皇甫嵩讨张梁，大战于曲阳。这里朱儁进攻张宝。张宝引贼众八九万，屯于山后。儁令玄德为其先锋，与贼对敌。张宝遣副将高升出马搦战，玄德使张飞击之。飞纵马挺矛，与升交战，不数合，刺升落马。玄德麾军直冲过去。张宝就马上披发仗剑，作起妖法。只见风雷大作，一股黑气从天而降，黑气中似有无限人马杀来。玄德连忙回军，军中大乱。败阵而归，与朱儁计议。儁曰：“彼用妖术，我来日可宰猪羊狗血，令军士伏于山头；候贼赶来，从高坡上泼之，其法可解。”玄德听令，拨关公、张飞各引军一千，伏于山后高冈之上，盛猪羊狗血并秽物准备。次日，张宝摇旗擂鼓，引军搦战，玄德出迎。交锋之际，张宝作法，风雷大作，飞砂走石，黑气漫天，滚滚人马，自天而下。玄德拨马便走，张宝驱兵赶来。将过山头，关、张伏军放起号炮，秽物齐泼。但见空中纸人草马，纷纷坠地；风雷顿息，砂石不飞。</p>
<p>...</p>
</div>
<div id="section3" class="container-fluid bg-secondary text-white" style="padding:100px 20px;">
<h1>第三回 议温明董卓叱丁原 馈金珠李肃说吕布</h1>
<p>且说曹操当日对何进曰：“宦官之祸，古今皆有；但世主不当假之权宠，使至于此。若欲治罪，当除元恶，但付一狱吏足矣，何必纷纷召外兵乎？欲尽诛之，事必宣露。吾料其必败也。”何进怒曰：“孟德亦怀私意耶？”操退曰：“乱天下者，必进也。”进乃暗差使命，赍密诏星夜往各镇去。</p>
<p>却说前将军、鳌乡侯、西凉刺史董卓，先为破黄巾无功，朝议将治其罪，因贿赂十常侍幸免；后又结托朝贵，遂任显官，统西州大军二十万，常有不臣之心。是时得诏大喜，点起军马，陆续便行；使其婿中郎将牛辅；守住陕西，自己却带李傕、郭汜、张济、樊稠等提兵望洛阳进发。</p>
<p>...</p>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子解释
将 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" 才能正常工作。
