Question

我在启动Bootstrap 4的Scrollspy时遇到问题。我已经检查过BS4文档，并在youtube上做了一个小的Scrollspy教程，但是我不知道自己在做什么错。我目前正在将CDN用于BS4的CSS和JS文件。这是一个代码笔的链接：https://codepen.io/James-Goodwin/pen/QYpePq

<body data-spy="scroll" data-target="#responsiveNav" data-offset="50">

  <header id="home">
    <!--Navbar-->
    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
      <a href="index.html" class="navbar-brand"><!--<img src="img/ShadeSetters-logo.png" alt="Shade Setters logo">-->ShadeSetters</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#responsiveNav">
                <span class="navbar-toggler-icon"></span>
            </button>

      <div class="collapse navbar-collapse" id="responsiveNav">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#content1">About</a></li>
          <li class="nav-item"><a class="nav-link" href="#content2">Services</a></li>
          <li class="nav-item"><a class="nav-link" href="#content3">Testimonials</a></li>
          <li class="nav-item"><a class="nav-link" href="#content4">FAQ</a></li>
        </ul>
      </div>
    </nav>
  </header>

  <section id="content1" class="container-fluid bg-success" style="padding-top:70px; padding-bottom: 70px">
    <h1>Content 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam
      debitis error, sit id quod quae alias, expedita corporis soluta.</p>
  </section>

  <section id="content2" class="container-fluid bg-warning" style="padding-top:70px; padding-bottom: 70px">
    <h1>Content 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam
      debitis error, sit id quod quae alias, expedita corporis soluta.</p>
  </section>

  <section id="content3" class="container-fluid bg-primary" style="padding-top:70px; padding-bottom: 70px">
    <h1>Content 3</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam
      debitis error, sit id quod quae alias, expedita corporis soluta.</p>
  </section>

  <section id="content4" class="container-fluid bg-danger" style="padding-top:70px; padding-bottom: 70px">
    <h1>Content 4</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam
      debitis error, sit id quod quae alias, expedita corporis soluta.</p>
  </section>
</body>

Answer 1

您创建的Codepen不包含Scrollspy组件所需的Bootstrap JS。另外，.active类将在CSS中设置，而不是:active状态。

.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover {
  color: #59abe3;
}

Codeply：https://www.codeply.com/go/31pbFXSYkg

Answer 2

实际上可以。也许您忘了添加jQuery和Bootstrap捆绑包？

全屏检查下面的代码段。我在每个部分添加了更多文本，以便您可以清楚地看到。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<body data-spy="scroll" data-target="#responsiveNav" data-offset="50">

  <header id="home">
    <!--Navbar-->
    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
      <a href="index.html" class="navbar-brand"><!--<img src="img/ShadeSetters-logo.png" alt="Shade Setters logo">-->ShadeSetters</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#responsiveNav">
                <span class="navbar-toggler-icon"></span>
            </button>

      <div class="collapse navbar-collapse" id="responsiveNav">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#content1">About</a></li>
          <li class="nav-item"><a class="nav-link" href="#content2">Services</a></li>
          <li class="nav-item"><a class="nav-link" href="#content3">Testimonials</a></li>
          <li class="nav-item"><a class="nav-link" href="#content4">FAQ</a></li>
        </ul>
      </div>
    </nav>
  </header>

  <section id="content1" class="container-fluid bg-success" style="padding-top:70px; padding-bottom: 70px">
    <h1>Content 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam debitis error, sit id quod quae alias, expedita corporis soluta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam debitis error, sit id quod quae alias, expedita corporis soluta.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam debitis error, sit id quod quae alias, expedita corporis soluta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam debitis error, sit id quod quae alias, expedita corporis soluta.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam debitis error, sit id quod quae alias, expedita corporis soluta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam debitis error, sit id quod quae alias, expedita corporis soluta.</p>
  </section>

  <section id="content2" class="container-fluid bg-warning" style="padding-top:70px; padding-bottom: 70px">
    <h1>Content 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam debitis error, sit id quod quae alias, expedita corporis soluta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam debitis error, sit id quod quae alias, expedita corporis soluta.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam debitis error, sit id quod quae alias, expedita corporis soluta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam debitis error, sit id quod quae alias, expedita corporis soluta.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam debitis error, sit id quod quae alias, expedita corporis soluta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam debitis error, sit id quod quae alias, expedita corporis soluta.</p>
  </section>

  <section id="content3" class="container-fluid bg-primary" style="padding-top:70px; padding-bottom: 70px">
    <h1>Content 3</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam debitis error, sit id quod quae alias, expedita corporis soluta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam debitis error, sit id quod quae alias, expedita corporis soluta.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam debitis error, sit id quod quae alias, expedita corporis soluta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam debitis error, sit id quod quae alias, expedita corporis soluta.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam debitis error, sit id quod quae alias, expedita corporis soluta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam debitis error, sit id quod quae alias, expedita corporis soluta.</p>
  </section>

  <section id="content4" class="container-fluid bg-danger" style="padding-top:70px; padding-bottom: 70px">
    <h1>Content 4</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam debitis error, sit id quod quae alias, expedita corporis soluta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam debitis error, sit id quod quae alias, expedita corporis soluta.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam debitis error, sit id quod quae alias, expedita corporis soluta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam debitis error, sit id quod quae alias, expedita corporis soluta.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam debitis error, sit id quod quae alias, expedita corporis soluta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam debitis error, sit id quod quae alias, expedita corporis soluta.</p>
  </section>
</body>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

为什么BS4 Scrollspy无法正常工作？

2 个答案: