滚动时更改导航 class

Question

下面有一段代码，旨在更改固定导航的颜色以匹配 div 用户滚动过去的颜色。

我遇到的问题是，由于整个页面中有多个相同元素的实例，所以当用户没有超过自己时，它们都会尝试删除背景 class。

我怎样才能让它只在用户滚动离开元素时触发，而不是在它超出区域时触发？

我是 jQuery 的新手，如有任何建议，我们将不胜感激。谢谢！

$(window).scroll(function(){
  $(".banner").each(function(){
    var windowScroll  = $(window).scrollTop(),
        bannerTop     = $(this).offset().top,
        bannerHeight  = $(this).outerHeight(),
        bannerbottom  = (bannerTop + bannerHeight),
        bgColor       = $(this).attr("primary-colour");

    // When the window scrolls over the banner then change the nav colour
    if ((windowScroll >= bannerTop) && (windowScroll <= bannerbottom)) {
      $(".body-header").css("background", bgColor);
    }
    else {
      $(".body-header").css("background", "");
    }
  });
});

https://jsfiddle.net/x789qh7m/1/

Answer 1

您的代码仅在 header 结束时才有效 banner.It 无法正常工作，因为滚动时，您正在遍历所有横幅.因此，即使第一个横幅将设置颜色，.each 也会迭代到最后一个（橙色）并重置它。
如果我对您的理解正确，这就是您的解决方案：https://jsfiddle.net/x789qh7m/3/ - 我只是在迭代横幅之前将 body 或 else 放在一起。该算法很简单 - 默认情况下滚动设置没有背景，如果下面有一些横幅 - 然后将背景更改为相同的颜色。

$(window).scroll(function () {
    $(".body-header").css("background", "");
    $(".body-header").removeClass("invert");
    $(".banner").each(function () {
        var windowScroll = $(window).scrollTop(),
            bannerTop = $(this).offset().top,
            bannerHeight = $(this).outerHeight(),
            bannerbottom = (bannerTop + bannerHeight),
            bgColor = $(this).attr("primary-colour");

        if ((windowScroll >= bannerTop) && (windowScroll <= bannerbottom)) {
            $(".body-header").css("background", bgColor);
            $(".body-header").addClass("invert");
        } 
    });
});

Answer 2

只需 return false 即可跳出 each 循环。无法遍历所有内容，因为您的其他内容会覆盖背景的值 css 属性:

$(window).scroll(function() {
  $(".banner").each(function() {
    var windowScroll = $(window).scrollTop(),
      bannerTop = $(this).offset().top,
      bannerHeight = $(this).outerHeight(),
      bannerbottom = (bannerTop + bannerHeight),
      bgColor = $(this).attr("data-colour");

    // When the window scrolls over the banner then change the nav colour
    if ((windowScroll >= bannerTop) && (windowScroll <= bannerbottom)) {
      $(".body-header").css("background", bgColor);
      $(".body-header").addClass("invert");
      return false;
    } else {
      $(".body-header").css("background", "");
      $(".body-header").removeClass("invert");
    }
  });
});

.body-header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 20px;
  border: 1px solid;
}
.banner {
  margin-bottom: 150px;
}
.banner:nth-child(5) {
  margin-bottom: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="body-header"></nav>
<section class="banner" data-colour="rgb(52, 49, 57)">
  <div style="background: rgb(52, 49, 57); width: 100%; height: 200px"></div>
</section>
<section class="banner" data-colour="rgb(234, 104, 52)">
  <div style="background: rgb(234, 104, 52); height: 200px"></div>
</section>
<section class="banner" data-colour="rgb(14, 104, 52)">
  <div style="background: rgb(14, 104, 52); height: 200px"></div>
</section>

滚动时更改导航 class

Change nav when scrolled over class

javascript

css

jquery

scroll

function