Question

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

我想要实现的目标：

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

This is a working example in 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

我正在做类似的事情。 You can can look at this fork of your code to see the JS

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

Answer 2

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

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

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

的课程

.active { color:#fff }

这是我的代码工作副本的codepen

Scrollspy在Bootstrap 4中不起作用

2 个答案: