Почему BS4 Scrollspy не работает правильно? - PullRequest
Новая
       3

Почему BS4 Scrollspy не работает правильно?

0 голосов
/ 01 февраля 2019

У меня проблемы с работой Scrollspy в Bootstrap 4.Я уже проверил документацию BS4 и сделал небольшое руководство по Scrollspy на YouTube, но я не могу понять, что я делаю неправильно.В настоящее время я использую CDN для файлов CSS и JS BS4.Вот ссылка на кодовый блок: 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>

Ответы [ 2 ]

0 голосов
/ 01 февраля 2019

На самом деле это работает.Может быть, вы забыли добавить jQuery и Bootstrap Bundle?

Проверьте приведенный ниже фрагмент во весь экран.Я добавил больше текста в каждый раздел, чтобы вы могли видеть ясно. 

<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>
0 голосов
/ 01 февраля 2019

Кодовая ручка, которую вы создали, не включает Bootstrap JS, которая требуется для компонента Scrollspy.Также в CSS будет установлен класс .active, а не состояние :active. 

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...