Bootstrap Scroll Spy not working.Shows 只有主页状态处于活动状态但向下滚动时不会更改为其他状态

Question

这是我的 html 和 css.please 帮助我使用 scrollspy，因为我不知道到底是什么问题。如果可能的话，请告诉我您为解决问题而编写的代码

我的HTML：

<nav class="navbar navbar-default center navbar-fixed-top" id="navbar">

  <button class="navbar-toggler hidden-sm-up"type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">&#9776;</button>

<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">

  <a class="navbar-brand" href="#"></a>

    <div class="navbar-inner">

      <ul class="nav navbar-nav">

        <li class="nav-item active">
            <a class="nav-link" data-target="#jumbotron">HOME <span class="sr-only">(current)</span></a>
        </li>

        <li class="nav-item">
            <a class="nav-link" data-target="#about">ABOUT</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" data-target="#skills">SKILLS</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#contact">CONTACT</a>
        </li>

      </ul>

    </div>

</div>

</nav>

<div class=" jumbotron" id="jumbotron"></div>
<div id="about"></div>
<div id="skills"></div>
<div id="contact"></div>

我的CSS

并且 div 的高度为 750px

  body
  {

    background: none;
    position: relative;
    margin: 0;
    padding: 0;
    font-family: 'Droid Serif', Georgia, Times, serif;

  }
  /* --------------------------------------------Navbar CSS--------------------------------------------------- */

  .navbar-default 
  {
    background-color: #610B0B ;
    border-radius:0px;

  }
  .navbar-default .navbar-nav > li > a 
  {
    color: white;
    font-size: 15px;

    font-family: 'Droid Serif', Georgia, Times, serif;
    letter-spacing: 1px;
    margin: 3px 10px -3px 10px;
    border: 2px solid transparent;
    padding: 8px;

  }

  .navbar-default .navbar-nav > li > a:hover,
  .navbar-default .navbar-nav > li > a:focus
  { 
    border: 2px solid white;
    border-radius: 5px;
    color: white;
    padding: 8px;
  }

  .navbar-default .navbar-nav > .active > a, 
  .navbar-default .navbar-nav > .active > a:hover, 
  .navbar-default .navbar-nav > .active > a:focus 
  {
    border: 2px solid white;
    border-radius: 5px;
    color: #555;
    background-color: #E7E7E7;
  }

Answer 1

有几处错误。

首先，你的 3 个 nav-link 主播在他们应该有 href=

的时候有 data-target=

其次，您需要将导航栏的data-target=设置为<body>。这允许 Javascript 找到 Scrollspy 的目标：

<body data-target="#navbar">

第三，如果你还没有，你需要通过 Javascript:

调用 Scrollspy

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

这是一个带有工作示例的代码笔：

http://codepen.io/charliebeckstrand/pen/NrWpXP

Answer 2

我在 bootstrap 5 中遇到了同样的问题并下载了 bootstrap 4.3.1 并将其替换为以前的版本。

Bootstrap Scroll Spy not working.Shows 只有主页状态处于活动状态但向下滚动时不会更改为其他状态

Bootstrap Scroll Spy not working.Shows only the home state active but doesnt change to other states when scrolled down

html

javascript

css

jquery

scrollspy