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

我正在Bootstrap 4中的一个网页上工作，该网页包含浅色和深色背景以及固定导航栏。 导航栏是黑暗的（具有bg-dark的css类），虽然它很容易在光线部分可见，但它与黑暗部分无法区分。

我已将Bootstrap的滚动间谍添加到页面中，但它的作用是将active类添加到导航栏项，如下所示：

 .page-section { padding: 70px 10px } .page-section.bg-dark * { color: #fff; } 

      
 
 
 Section 1 
 
 Section 2 
 
 Section 3 
 
 
 
 
Section 1
 
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!
 
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!
 
 
 
Section 2
 
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!
 
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!
 
 
 
Section 3
 
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!
 
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!
 
  

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

Answer 1

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

 $(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; } 

      
 
 
 Section 1 
 
 Section 2 
 
 Section 3 
 
 
 
 
Section 1
 
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!
 
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!
 
 
 
Section 2
 
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!
 
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!
 
 
 
Section 3
 
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!
 
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!
 
  

Answer 2

使用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; } 

      
 
 
 Section 1 
 
 Section 2 
 
 Section 3 
 
 
 
 
Section 1
 
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!
 
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!
 
 
 
Section 2
 
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!
 
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!
 
 
 
Section 3
 
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!
 
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!