Question

我在下方有一段代码，用于更改固定导航的颜色以匹配用户滚过的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/

Answer 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");
        } 
    });
});

Answer 2

只需返回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>

在课程上滚动时更改导航

2 个答案: