Javascript Scrollspy在引导程序4中不工作_Javascript_Css_Twitter Bootstrap_Scrollspy

Javascript Scrollspy在引导程序4中不工作

javascript css twitter-bootstrap

Javascript Scrollspy在引导程序4中不工作,javascript,css,twitter-bootstrap,scrollspy,Javascript,Css,Twitter Bootstrap,Scrollspy,因为我用Bootstrap4对公文包页面进行了编码，所以我遵循了Scrollspy最新alpha版本的文档。但它仍然不起作用 <a class="navbar-brand navfont" href="/">portfolio.</a> <div class="collapse navbar-collapse justify-content-end" id="navbarCollapse"> <ul class="navbar-nav">

因为我用Bootstrap4对公文包页面进行了编码，所以我遵循了Scrollspy最新alpha版本的文档。但它仍然不起作用

<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>

我想要达到的目标：

<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>

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

它看起来像我的代码，但我不明白为什么它在我的代码中不起作用

<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>

我的导航条码：

<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>

<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>

我试过：

<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中的a样式
添加类“active”并设置其样式
在CSS中添加：焦点

把整件事都查清楚

<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>

谢谢你们

我也在做类似的事情

<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>

我在HTML中添加了

class=“section”

，告诉jQuery何时添加这些活动类。让我知道这是否适合你。

我也在做类似的事情

<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>

我在HTML中添加了

class=“section”

，告诉jQuery何时添加这些活动类。让我知道这是否对您有效。

看起来您错过了两件小事，首先导航需要

navbar1

的id，这是来自body

数据目标=“#navbar1”

，因此导航将变成：

<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>

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

这里有一份我的代码工作副本

看起来您遗漏了两件小事，首先导航需要

navbar1

的id，这是来自body

数据目标=“#navbar1”

，因此导航将变成：

<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>

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

这是我的工作代码副本

确实有效！我甚至认为JS库URL是错误的。非常感谢。但是我也可以将jQuery设置为目标ID，对吗？你可以，但是唯一的问题是，你必须调整它，以知道它何时超过该ID。我发现只为它设置一个类要容易得多。的确，它起到了作用！我甚至认为JS库URL是错误的。非常感谢。但是我也可以将jQuery设置为目标ID，对吗？你可以，但是唯一的问题是，你必须调整它以知道它何时超过该ID。我发现只为它设置一个类要容易得多。它工作起来很有魅力，我不必写一行JS！谢谢你，乔希。非常有用。它就像一个符咒，我不需要写一行JS！谢谢你，乔希。非常有用。

<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>