基于背景/类切换固定导航链接颜色的代码故障修复咨询

问题根源 #

1. 原代码只获取了第一个.white_div的位置，完全没考虑页面里的其他白色/深色区块，导致滚动到后续区块时无法触发判断
2. 固定定位的.menu-item的offset().top是固定值（不会随滚动变化），用它来判断位置逻辑完全错误

修复后的代码 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="menu-item menu_white" href="#">Link</a>

<div class="dark_div">Dark Background</div>
<div class="white_div">White background</div>
<div class="white_div">White background</div>
<div class="white_div">White background</div>
<div class="dark_div">Dark Background</div>

<div style="height: 500px"></div>

CSS

.menu-item {
  position: fixed;
  top: 0; /* 明确固定在顶部，方便计算位置 */
}

.menu_white {
  color: #fff;
}

.menu_black {
  color: #000;
}

.dark_div {
  background: #000;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.white_div {
  background: #fff;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
}

JavaScript

$(document).ready(function(){
  // 获取菜单距离顶部的固定位置（这里因为top:0，所以是0，若菜单有偏移可调整）
  const menuOffsetTop = $('.menu-item').position().top;
  
  $(window).scroll(function(){
    const scrollTop = $(window).scrollTop();
    // 计算当前菜单在页面中对应的垂直位置（滚动距离 + 菜单固定偏移）
    const menuCurrentPos = scrollTop + menuOffsetTop;
    let isOnWhiteBg = false;

    // 遍历所有背景区块，判断菜单当前位置是否落在白色区块内
    $('.white_div').each(function(){
      const blockTop = $(this).offset().top;
      const blockBottom = blockTop + $(this).height();
      if(menuCurrentPos >= blockTop && menuCurrentPos <= blockBottom){
        isOnWhiteBg = true;
        return false; // 找到匹配区块后终止遍历
      }
    });

    // 根据判断结果切换菜单颜色类
    if(isOnWhiteBg){
      $('.menu-item').addClass('menu_black').removeClass('menu_white');
    } else {
      $('.menu-item').addClass('menu_white').removeClass('menu_black');
    }
  });
  
  // 页面加载时先执行一次判断，确保初始状态正确
  $(window).trigger('scroll');
});

关键改动说明 #

• 改用scrollTop + 菜单固定偏移来计算菜单当前对应的页面位置，替代原代码中固定不变的menu_pos
• 遍历所有.white_div区块，检查菜单位置是否落在任意白色区块范围内
• 页面加载时主动触发一次滚动事件，确保初始状态的颜色正确
• 合并了类操作的写法，让代码更简洁

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