使用 scroll-spy 更改导航栏背景类答案

【问题标题】：Use scroll-spy to change the navbar background classes使用 scroll-spy 更改导航栏背景类
【发布时间】：2018-11-30 00:03:34
【问题描述】：

我正在使用 Bootstrap 4 制作一个网页，该网页的部分具有浅色和深色背景以及固定的导航栏。导航栏是深色的（具有 css 类 bg-dark），虽然在浅色部分很容易看到它，但 与深色部分没有区别。

我已经在页面中添加了 Bootstrap 的 scroll-spy，但是它所做的是将 active 类添加到导航栏项中，如下所示：

.page-section {
  padding: 70px 10px
}

.page-section.bg-dark * {
  color: #fff;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<body data-spy="scroll" data-target=".navbar" data-offset="15">
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#section1">Section 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section2">Section 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section3">Section 3</a>
      </li>
    </ul>
  </nav>

  <div id="section1" class="container-fluid bg-light page-section">
    <h1>Section 1</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <div id="section2" class="container-fluid bg-dark page-section">
    <h1>Section 2</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <div id="section3" class="container-fluid bg-light page-section">
    <h1>Section 3</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
</body>

当用户使用 id section3 或（甚至更好）使用 class bg-light 到达 div 时，如何将导航栏的 navbar-dark bg-dark 更改为 navbar-light bg-light？

【问题讨论】：

您可能想在这里查看一些选项：stackoverflow.com/questions/42237406/…

标签： javascript jquery css twitter-bootstrap scrollspy

【解决方案1】：

这里有你需要的测试，但滚动 1 px 并在开始更改某些状态之后。对不起我的英语不好。

https://codepen.io/jhonycertz/pen/eQPbXy

$(window).scroll(function() {

  var isScrolled = $(document).scrollTop() > 1;
    $('.menu').toggleClass('nav_white', isScrolled);
  
$(window).on('activate.bs.scrollspy', function (e,obj) {
  if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
  	return;
  }
	var Transparent = $(obj.relatedTarget).hasClass('nav_transparent');
  var White = $(obj.relatedTarget).hasClass('nav_white');
  var Blue = $(obj.relatedTarget).hasClass('nav_blue');
  $('.nav').toggleClass('nav_transparent', Transparent, !White, !Blue)
              .toggleClass('nav_white', White, !Transparent, !Blue)
              .toggleClass('nav_blue', Blue, !Transparent, !White);
});
  });

.page-section {
  padding: 70px 10px
}
.move{
  background-color:#000
}
.page-section.bg-dark * {
  color: #fff;
}
.transparent{
  background-color:green;
}
.nav_transparent{background-color:yellow;}
.nav_white{background-color:grey;}
.nav_blue{background-color:black;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<body data-spy="scroll" data-target=".nav" data-offset="15">
  <nav class="menu nav navbar navbar-expand-sm nav_transparent fixed-top">
    <ul class="navbar-nav">
     <li class="nav-item ">
        <a class="nav-link" href="#section">Section 0</a>
      </li>
      <li class="nav-item d-none">
        <a class="nav-link" href="#section1">Section 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section2">Section 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section3">Section 3</a>
      </li>
       <li class="nav-item">
        <a class="nav-link" href="#section4">Section 4</a>
      </li>
    </ul>
  </nav>
  <div id="section" class="container-fluid bg-light page-section">
    <h1>Section 0</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <div id="section1" class="container-fluid bg-light page-section nav_transparent">
    <h1>Section 1</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <div id="section2" class="container-fluid bg-light page-section nav_blue">
    <h1>Section 2</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <div id="section3" class="nav_white container-fluid bg-dark page-section">
    <h1>Section 3</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <div id="section4" class="nav_blue container-fluid bg-light page-section">
    <h1>Section 4</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
</body>

【讨论】：

【解决方案2】：

没有内置方法可以更改活动类的目标，因此您只能使用 javascript 选项。幸运的是，Bootstrap 4 确实提供了一个在设置新的活动项目时触发的事件。一个奇怪的夸克是文档建议您可以使用data-spy 将侦听器事件添加到元素。这不起作用。您必须将其添加到 window 对象 (https://stackoverflow.com/a/48694139/854246)。这是一个代码sn-p：

$(window).on('activate.bs.scrollspy', function (e,obj) {
    // spy changes to the last item at the end of the page,
    // so we want to avoid changing the class at this point.
    // Spy still works, but we want the class to be based on
    // whatever block was closest.
    // https://stackoverflow.com/a/40370876/854246
    if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
        return;
    }

    // Here we detect the targets class.  I'm just using bg-
    // light.  Not the most robust solution, but it can be
    // tweaked.
    var isBGLight = $(obj.relatedTarget).hasClass('bg-light');
    // note that navbar needs two classes to work.  If you
    // only set bg-light/bg-dark, the link text color doesn't
    // change.
    $('.navbar').toggleClass('navbar-dark bg-dark', isBGLight)
                .toggleClass('navbar-light bg-light', !isBGLight);
});

.page-section {
  padding: 70px 10px
}

.page-section.bg-dark * {
  color: #fff;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<body data-spy="scroll" data-target=".navbar" data-offset="15">
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#section1">Section 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section2">Section 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section3">Section 3</a>
      </li>
    </ul>
  </nav>

  <div id="section1" class="container-fluid bg-light page-section">
    <h1>Section 1</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <div id="section2" class="container-fluid bg-dark page-section">
    <h1>Section 2</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <div id="section3" class="container-fluid bg-light page-section">
    <h1>Section 3</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
</body>

我会将其设为堆栈 sn-p，但出于安全原因（沙盒 iframe 等），当您在 window 对象上收听事件时，堆栈溢出不喜欢它，所以这是一个小提琴演示这个解决方案： 显然它确实支持它。它只是不喜欢你使用console.log

https://jsfiddle.net/jmarikle/jzg7ok0v/

【讨论】：

太棒了！但是如果这些部分没有 ids 并且链接看起来像这样：<a class="nav-link" href="contact.html">Contact page</a>?
@RazvanZamfir 不幸的是，你需要一个新的解决方案。 According to the documentation，spy 需要“必须指向具有 [an] id 的元素”的锚点。
该解决方案是 100% 自定义解决方案，还是有插件可供使用？
@RazvanZamfir 这是使用引导程序已经提供的自定义解决方案。 jQuery 是 bootstrap 的依赖项，所以它应该已经存在。如果您使用的是 scroll-spy，则应该不需要其他依赖项。至于插件，我个人并不熟悉任何适合这种特殊需求的插件。您在实现上述代码时遇到问题吗？

【解决方案3】：

切换类使用js代码

 $(window).on('activate.bs.scrollspy', function (e,obj) 
{
   if(document.querySelector(obj.relatedTarget).classList.contains('bg-light'))
   {
      $('.navbar').removeClass("navbar-dark bg-dark");
      $('.navbar').addClass("bg-light navbar-light" );
   }
   else
   {
      $('.navbar').removeClass("bg-light navbar-light");
      $('.navbar').addClass( "navbar-dark bg-dark" );
   }
});

.page-section {
  padding: 70px 10px
}

.page-section.bg-dark * {
  color: #fff;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<body data-spy="scroll" data-target=".navbar" data-offset="15">
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#section1">Section 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section2">Section 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section3">Section 3</a>
      </li>
    </ul>
  </nav>

  <div id="section1" class="container-fluid bg-light page-section">
    <h1>Section 1</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <div id="section2" class="container-fluid bg-dark page-section">
    <h1>Section 2</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <div id="section3" class="container-fluid bg-light page-section">
    <h1>Section 3</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
</body>

【讨论】：