Scrollspy 在 Bootstrap 4 中不工作

Question

由于我使用 Bootstrap4 编写了投资组合页面，所以我遵循了 Scrollspy 最新 alpha 版本中的文档。但是还是不行。

我想达到的目标：

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

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
添加 class "active" 并设置样式
在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 的 class，因此您将需要一个 class，例如

.active { color:#fff }

这是我的代码工作副本codepen

Scrollspy 在 Bootstrap 4 中不工作

Scrollspy not working in Bootstrap 4

javascript

css

twitter-bootstrap

scrollspy