滚动时导航栏颜色匹配对应区块颜色的实现问题求助

需求说明 #

实现页面滚动时，导航栏颜色自动适配当前划过的section区块颜色，反向滚动时也同步切换。例如当前导航栏为深色，当下方浅色section即将到达导航栏位置时，导航栏需切换为对应颜色以适配。

已完成代码 #

HTML #

<nav>Navigation</nav>
<section data-section-color="dark">Section 1</section>
<section data-section-color="light">Section 2</section>
<section data-section-color="dark">Section 3</section>
<section data-section-color="light">Section 4</section>
<section data-section-color="dark">Section 5</section>
<section data-section-color="light">Section 6</section>

SCSS #

$dark: #2B3336;
$light: #EEEEEE;

body {
  padding-top: 67px;
  margin: 0;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 67px;
  background: $dark;
  color: $light;
  padding: 0 25px;
  line-height: 67px;
  
  &.dark {
    background: $dark;
    color: $light;
  }
  
  &.light {
    background: $light;
    color: $dark;
  }
}

section {
  height: 400px;
  padding: 25px;
  
  &[data-section-color="dark"] {
    background: $dark;
    color: $light;
  }
  
  &[data-section-color="light"] {
    background: $light;
    color: $dark;
  }
}

jQuery（存在问题的版本） #

$(window).on('scroll',function() {
    var $nav = $('nav');
    var navHeight = $nav.height();
    var amountScrolled = $(window).scrollTop();
  
  $('section[data-section-color]').each(function() {
    var thisTop = $(this).offset().top;
    if ((thisTop - navHeight) == 0) {
        var color = $(this).data('section-color');
      $nav.addClass(color);
      console.log(color);
    }
  });
});

缺失/问题部分及修正方案 #

当前jQuery代码无法实现需求，核心问题及修复如下：

• 条件判断过于严苛：(thisTop - navHeight) == 0仅当滚动位置完全等于section顶部-导航栏高度时才触发，实际需要判断滚动位置是否进入section的“触发范围”——即当section顶部即将到达导航栏底部（thisTop - navHeight）到section底部离开导航栏顶部（thisTop + $(this).height()）的区间内。
• 未移除旧类名：切换颜色时未清除之前的dark/light类，导致类名叠加，样式冲突。
• 未处理滚动优先级：遍历所有section时，需要找到当前最应该适配的section（通常是第一个顶部小于等于滚动位置+导航栏高度且未完全滚出视野的section）。

修正后的jQuery代码：

$(window).on('scroll', function() {
  var $nav = $('nav');
  var navHeight = $nav.height();
  var scrollPos = $(window).scrollTop() + navHeight; // 导航栏底部的位置

  $('section[data-section-color]').each(function() {
    var $section = $(this);
    var sectionTop = $section.offset().top;
    var sectionBottom = sectionTop + $section.height();

    // 判断当前导航栏底部是否处于当前section的范围内
    if (scrollPos >= sectionTop && scrollPos <= sectionBottom) {
      var targetColor = $section.data('section-color');
      // 先移除旧类，再添加新类
      $nav.removeClass('dark light').addClass(targetColor);
      return false; // 找到匹配的section后停止遍历，提升性能
    }
  });
});

这个修正后的代码会在滚动时，实时判断导航栏底部所在的section，切换对应的导航栏样式，同时支持正向和反向滚动的适配。

内容的提问来源于stack exchange，提问作者TheCarver