我正在尝试制作一个导航栏，当用户向下滚动页面时，它会将特定导航栏链接的样式更改为活动。我正在尝试使用Bootstrap的滚动间谍功能来做到这一点。
我查了一下，有很多可以理解的教程(例如。https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp或https://mdbootstrap.com/docs/standard/navigation/scrollspy/#example-3( 。
尽管我相信我完全遵循了他们的建议，但效果似乎并不奏效。我担心这可能与由于BS5放弃JQuery而对spyscroll功能的机制进行的更改有关。但很可能是因为我的代码中出现了错误，尽管我尽了最大努力严格遵循教程。
我的代码：
(a( 包含的外部文件：
<link rel="stylesheet" href="BS5/css/bootstrap.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="BS5/css/styles.css" /> <!-- BS customising css -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="BS5/js/bootstrap.js"></script>
<script src="BS5/js/jsko.js"></script> <!-- non related custom scripts -->
(b( 样式标签
<style>
body
{
position: relative;
}
</style>
(c( 机身标签
<body data-spy="scroll" data-target="#navbarko">
(d( 导航条标签
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top nav-larger" id="navbarko">
<div class="container">
<a class="navbar-brand" href="#"><img src="logo.png"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mission">Our mission</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#debt">Debt</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#finadv">Finland</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#references">References</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
(e( 整个页面的部分标签的开头：
<section class="feature grad_third" id="mission">
<section class="feature grad_third" id="debt">
<section class="feature grad_third" id="finadv">
<section class="companies references" id="references">
<section class="feature grad_third" id="contact">
非常感谢您的时间和帮助。
Bootstrap 5中的情况略有变化，W3Schools教程是Bootstrap 4。
所以你需要将你的身体标签更改为(注意"bs"，用于Bootstrap(：-
data-bs-spy="scroll"
点击此处了解更多信息：-https://getbootstrap.com/docs/5.0/migration/#javascript
所有JavaScript插件的数据属性现在都有名称空间以提供帮助区分Bootstrap功能与第三方和您自己的密码例如，我们使用数据bs切换而不是数据切换。