Javascript CSS固定导航栏应用新样式，如果通过滚动达到某个元素

我有一个固定的引导navnar，它是透明的

现在，当我滚动并且导航栏到达id为

services

的某个元素时，我希望更改此样式

我尝试使用高度，但不知何故，当我滚动时，这些值不会更新。 我希望导航栏在开始时是透明的，如果它到达

服务

容器，它应该是彩色的

我尝试的是：

$(window).on('scroll',function(){
    var service_height = $('#service').outerHeight()
    var navbar_height = $('.mynavbar').outerHeight()
    console.log("service" + service_height);
    console.log("navbar" + navbar_height);
    // we round here to reduce a little workload
    //stop = Math.round($(window).scrollTop());
    if (navbar_height >= service_height) {
        $('.mynavbar').addClass('past-main');
    } else {
        $('.mynavbar').removeClass('past-main');
   }

});

我想要的是：

---

您的方法很奇怪，您试图比较导航栏的高度和服务部分的高度，并基于添加或删除类

您应该获取服务部分相对于文档的当前顶部位置，并将其与当前滚动位置进行比较

您可以使用和jQuery函数来实现这一点

var trigger;

$(window).scroll(function() {

  trigger = $('#section-3').offset().top - $('.navbar').height();

  if ($(this).scrollTop() > trigger) {
    $('.navbar').addClass('bg');
  } else {
    $('.navbar').removeClass('bg');
  }

});

您可以使用引导并将滚动位置设置为“服务”的顶部。使用CSS定义

.affix top

和

.affix

的导航栏样式

   /* navbar style once affixed to the page */ 
   .affix {
         background-color: black;   
    }

    @media (min-width:768px) {
        .affix-top {
          /* navbar style at top */
          background-color:transparent;
          border-color:transparent;
          padding: 15px; 
        }
    }

演示：