在类上滚动时更改导航

Change nav when scrolled over class

本文关键字：导航 滚动      更新时间：2023-09-26

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

我遇到的问题是，在整个页面中有多个相同元素的实例，当用户不在其上时，它们都试图删除背景类。

我怎样才能让这个触发，只有当使用滚动离开元素，而不是当它是在区域之外?

我是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/

你的代码将只工作，当标题在最后一个横幅。它不能正常工作，因为当滚动时，你在上迭代所有横幅。所以即使第一个横幅设置了颜色，.each将迭代直到最后一个(橙色)，它将重置它。
如果我正确理解你，这是你的解决方案:https://jsfiddle.net/x789qh7m/3/-我只是把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");
        } 
    });
});

返回false跳出each循环。不能遍历所有，因为你的else覆盖了background 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>

相关文章：