Javascript 引导Scrollspy不工作：Scrollspy不是一个函数

我正在制作一个单页网站，我正在尝试获取导航栏链接，以反映您所在页面的哪个部分。我曾尝试通过HTML使用它，但没有成功。 我在包含不同部分的容器上有此代码

<div class="container" data-spy="scroll" data-target="#navbar">

也没有运气。我在引导CDN之前有jQuery CDN，但是我在控制台中遇到了这个错误。未捕获类型错误：$（…）。scrollspy不是函数

---

CodePen:

如果您检查控制台，您将看到一个错误。Bootstrap4（目前）需要额外的js脚本才能正常运行。在bootstrap4js文件之前添加popper.js，Scrollspy应该可以正常工作。这是cdn:

我还建议添加一点偏移来补偿导航栏的高度。这样，当滚动或单击时，链接将在正确的时间点亮。您可以在JS中这样做：

$('body').scrollspy({ target: '#navbar-example', offset: 50 });

---

从Bootstrap4.5迁移到5.0时，我遇到了同样的问题。解决方案是替换：

$（'body'）.scrollspy（{target:'#navbar example'}）

与：

var scrollSpy=new bootstrap.scrollSpy（document.body{
目标：“#导航栏示例”
})

请参阅引导文档：

---

您应该加载两次jquery，请检查它，或者上载完整代码我如何加载两次？只需在HTML中添加两次CDN？我添加了完整的代码，您无需添加

jQuery

两次。但是，您的笔中缺少了

bootstrap.js

include。此外，你可能不会看到卷轴间谍在所有它的荣耀，直到你的部分有他们的内容。如果部分很窄/很薄，它可能看起来会跳过部分。我添加了bootsrap.js，但是scrollspy仍然无法工作。它只会点亮“联系我”部分，而不管您在哪个部门。此外，出于隐私原因，我从代码笔中删除了一些内容。

$('body').scrollspy({ target: '#navbar-example', offset: 50 });