滚动时元素触顶切换header类失效问题求助

API 探路者

2026-6-15

问题原因

原代码的核心问题是两个独立的scroll事件处理逻辑冲突：

第一个scroll事件遍历所有.header-hover元素，只要元素顶部触顶就给header加black类
第二个scroll事件遍历所有.remove-header元素，只要元素顶部触顶就移除black类

当页面滚动到包含.remove-header的区域后，该元素会一直满足offset <= 0的条件，后续即使滚动到新的.header-hover元素，添加类的操作会立刻被移除类的操作覆盖，导致后续触发失效。

解决方案

将两个事件合并为一个，统一判断当前视口顶部对应的元素类型，再决定是否添加/移除类。核心逻辑是：检查当前视口顶部是否处于任一.header-hover元素的范围内，只要有一个符合条件就添加类，否则移除。

修正后的JavaScript代码

$(document).ready(function() {
  $(window).on("scroll", function() {
    let shouldAddBlack = false;
    const scrollTop = $(window).scrollTop();
    
    $('.header-hover').each(function() {
      const $el = $(this);
      const elTop = $el.offset().top;
      const elBottom = elTop + $el.outerHeight();
      // 判断视口顶部是否处于当前.header-hover元素的范围内
      if (scrollTop >= elTop && scrollTop < elBottom) {
        shouldAddBlack = true;
        return false; // 找到符合条件的元素后停止遍历
      }
    });
    
    if (shouldAddBlack) {
      $("header").addClass("black");
    } else {
      $("header").removeClass("black");
    }
  });
});