Scrollspy在Bootstrap 4中不起作用

Question

由于我使用Bootstrap 4对组合页面进行了编码，因此我在其最新的alpha版本中遵循了Scrollspy上的文档。 但它仍然无效。

我想要实现的目标：

• 与文档中的示例非常相似，当我滚动页面时，根据我所在的部分，在向下滚动时让项目更改颜色。此外，导航栏应保持固定顶部。

这是Bootstrap 4中的一个工作示例，它看起来像我的代码，但我无法理解为什么它在我的工作不起作用。

我的导航栏代码：

<a class="navbar-brand navfont" href="/">portfolio.</a>
<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#about"><i class="fa fa-user-circle-o" aria-hidden="true"></i> about</a>
    </li>

    <li class="nav-item">
      <a class="nav-link" href="#portfolio"><i class="fa fa-picture-o" aria-hidden="true"></i> portfolio</a>
    </li>

    <li class="nav-item">
      <a class="nav-link" href="#contact"><i class="fa fa-envelope-o" aria-hidden="true"></i> contact</a>
    </li>
</div>
</ul>

我试过了：

• 删除CSS中的样式
• 添加“活动”类并为其设置样式
• 添加一个：专注于CSS

检查CodePen上的所有内容 。

感谢大伙们！

Answer 1

我正在做类似的事情。 您可以查看代码的这个分支以查看JS 。

在你的HTML中我添加了class="section"来告诉jQuery何时添加这些活动类。 如果这对您有用，请告诉我。

Answer 2

看起来你错过了2个小东西，导航首先需要navbar1的id，这是来自body data-target="#navbar1"所以nav会变成：

<nav class="navbar navbar-toggleable-md fixed-top" style="background-color: #fc7a57;" id="navbar1">

之后，这将在a.nav-link上添加一个名为active ，因此你将需要一个类

.active { color:#fff }

这里codepen的代码的工作副本