javascript - 如果滚动到达某个元素，则 CSS 固定导航栏应用新样式

Question

我有一个固定的 bootstrap navnar，它是透明的。

现在，当我滚动并且导航栏到达具有 ID services 的特定元素时，我希望这种样式发生变化。

我尝试使用高度，但不知何故，当我滚动时，值不会更新。 我希望导航栏在开始时是透明的，如果它到达 service 容器，它应该变成彩色的。

我的尝试:

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

});

我想要的:

Answer 1

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

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

您可以使用 offset()和 scrollTop() jQuery 函数。

var trigger;

$(window).scroll(function() {

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

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

});

CODEPEN