Question

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

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

并且主体设置为相对。

由于无法正常工作，我尝试将Scrollspy与javascript一起使用

$('.container').scrollspy({ target: '#navbar' })

也没有运气。我在引导CDN之前有jQuery CDN，但是在控制台中收到此错误。未捕获的TypeError：$（...）。scrollspy不是函数

CodePen：https://codepen.io/kjardine/pen/VqEbaz

Answer 1

如果您检查控制台，则会看到错误消息。目前，Bootstrap 4需要额外的js脚本才能正常运行。在Bootstrap 4 js文件之前添加popper.js，并且Scrollspy应该可以正常工作。这是CDN：https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js。

我还建议增加一些偏移量以补偿导航栏的高度。这样，在滚动或单击时，链接将在正确的时间点亮。您可以像这样在JS中完成此操作：

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

Answer 2

从引导程序4.5迁移到5.0时，我遇到了同样的问题。解决方法是替换：

$('body').scrollspy({ target: '#navbar-example' })

具有：

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

请参阅引导程序文档： https://getbootstrap.com/docs/5.0/components/scrollspy/#methods

Bootstrap Scrollspy不起作用：Scrollspy不是函数

2 个答案: