Question

所以我只是制作一个模型网页模板，并希望在滚动位置时更改主动导航链接。我正在寻找使用javascript但是已经转移到滚动间谍，因为它看起来很简单。

然而，这是我第一次使用bootstrap，我似乎无法让滚动间谍工作，并通过其他相关主题在网上看了几个小时，似乎无法找到问题并相信我可能会忽略一些简单的事情。

帮助...

$('body').scrollspy({ target: '.nav', offset: 50 })

body {position: relative;}

<body>
<header>
  <ul class="nav">
    <li class="active"><a href="#landing">Home</a></li>
    <li><a href="#portfolio">Portfolio  </a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</header>

- 编辑-------------

所以现在我有了这个（我会用pug和sass代码发布，就像我正在使用的那样）但是仍然没有工作，我无法绕过它。

body(data-spy="scroll" data-target=".navbar" data-offset="50")
  header
  nav
    ul(class="navbar")
      li(class="active")
        a(href="#landing") Home
      li
        a(href="#portfolio") Portfolio  
      li
        a(href="#about") About
      li
        a(href="#contact") Contact

body
  position: relative

.navbar
  position: fixed
  display: flex
  justify-content: flex-end
  list-style: none
  padding: 2rem 1rem
  width: 95%
li
  padding: 0 1rem

.navbar li
  a:hover
  color: black
  transition: all .1s ease-in-out
  font-weight: bold

.active
  a
  color: black
  font-weight: bold
  transition: all .3s linear

Answer 1

您的HTML缺少body代码中的某些属性，同时尝试使用nav代码而不是header

将data-spy="scroll"添加到应该用作的元素   可滚动区域（通常这是<body>元素）。

然后使用id或类的值添加data-target属性   导航栏的名称（.navbar）。这是为了确保   navbar与可滚动区域相连。

Scrollspy对您正在侦察的元素需要position: relative;   在，通常是<body>。

检查以下完整示例（请在整页中运行以获得清晰的结果）

body {
  position: relative;
}

#landing {
  padding-top: 50px;
  height: 500px;
  color: #fff;
  background-color: #1E88E5;
}

#portfolio {
  padding-top: 50px;
  height: 500px;
  color: #1E88E5;
  background-color: #fff;
}

#about {
  padding-top: 50px;
  height: 500px;
  color: #fff;
  background-color: #1E88E5;
}

#contact {
  padding-top: 50px;
  height: 500px;
  color: #1E88E5;
  background-color: #fff;
}

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body data-spy="scroll" data-target=".navbar" data-offset="50">

  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
        <a class="navbar-brand" href="#">C.S Photography</a>
      </div>
      <div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li>
              <a href="#landing">Home</a>
            </li>
            <li>
              <a href="#portfolio">Portfolio</a>
            </li>
            <li>
              <a href="#about">About</a>
            </li>
            <li>
              <a href="#contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
  <div id="landing" class="container-fluid">
    <h1>Catrina Shellenberg Photography</h1>
    <h1>Catrina Shellenberg Photography</h1>
    <h1>Catrina Shellenberg Photography</h1>
    <h1>Catrina Shellenberg Photography</h1>
    <h1>Catrina Shellenberg Photography</h1>
  </div>
  <div id="portfolio" class="container-fluid">
    <h2>Portfolio</h2>
    <h2>Portfolio</h2>
    <h2>Portfolio</h2>
    <h2>Portfolio</h2>
    <h2>Portfolio</h2>
    <h2>Portfolio</h2>
  </div>
  <div id="about" class="container-fluid">
    <h3>About</h3>
    <h3>About</h3>
    <h3>About</h3>
    <h3>About</h3>
    <h3>About</h3>
    <h3>About</h3>
  </div>
  <div id="contact" class="container-fluid">
    <h4>Contact</h4>
    <h4>Contact</h4>
    <h4>Contact</h4>
    <h4>Contact</h4>
    <h4>Contact</h4>
    <h4>Contact</h4>
    <h4>Contact</h4>

  </div>
  <footer>
    <script src="scripts.js"></script>
  </footer>
</body>

检查链接以获取更多详细信息
https://getbootstrap.com/docs/4.0/components/scrollspy/
https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp

Scrollspy没有突出显示导航链接

1 个答案: