滚动时为多元素添加/移除类失效：仅首个元素生效问题排查

问题根源 #

你的代码存在两个核心问题：

1. 重复绑定scroll事件+共享状态变量冲突：给每个data-header元素都绑定了scroll事件，滚动时会触发N次回调（N为header数量）。所有回调共享同一个this.lastscrolltop变量——第一个回调执行时会修改这个变量，导致后面的回调拿到的lastscrolltop已经是更新后的值，判断逻辑完全混乱，最终只有第一个header的类名切换看起来“正常”，其他元素的逻辑直接失效。
2. lastscrolltop未初始化：初始状态下this.lastscrolltop是undefined，第一次滚动时scrollTop > undefined的结果是false，会直接执行移除类名的操作，逻辑不符合预期。

修复后的代码 #

HTML部分无需修改，JS代码调整如下：

export default class Navigation {
  constructor() {
    this.headers = [...document.querySelectorAll('[data-header]')];
    // 初始化滚动位置为当前页面的滚动值
    this.lastscrolltop = window.pageYOffset || document.documentElement.scrollTop;
    
    // 只绑定一次scroll事件，避免重复触发
    window.addEventListener('scroll', () => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      
      // 遍历所有header统一处理类名
      this.headers.forEach(el => {
        if (scrollTop > this.lastscrolltop) {
          el.classList.add('myclass');
        } else {
          el.classList.remove('myclass');
        }
      });
      
      // 更新滚动位置记录
      this.lastscrolltop = scrollTop;
    });
  }
}

修复说明 #

• 只绑定一次scroll事件：滚动时仅执行一次回调，既提升性能，也避免了多个回调之间的状态干扰。
• 初始化lastscrolltop：确保第一次滚动时的判断逻辑从当前页面状态开始，而非undefined。
• 统一遍历处理所有header：在同一个scroll回调里完成所有元素的类名切换，保证所有data-header元素的状态同步更新。

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