滚动触发导航栏颜色切换异常：首个目标区域触发时页面无效果

看起来你遇到的问题是多个.boxes元素遍历导致样式被互相覆盖啦！咱们来理一理原因：

你当前的代码在scroll事件里会遍历所有.boxes元素，每一个盒子都会单独判断并修改导航样式。比如当第一个盒子进入触发区域（满足top <=100 && bottom >=100）时，代码把导航改成了绿色背景+白色文字，但紧接着遍历到第二个盒子时，它可能还没进入触发区域，代码又把导航样式改回了白色背景+绿色文字——所以视觉上第一个盒子触发时你完全看不到变化，直到第二个盒子进入区域，这时候遍历到它时设置了绿色样式，且后面没有更多盒子来覆盖这个设置，所以才会生效。

修复思路：先判断是否存在任意一个盒子满足触发条件，再统一设置样式 #

我们可以先通过some()方法判断有没有盒子处于触发区间，再根据这个结果一次性修改导航样式，彻底避免样式被重复覆盖的问题：

const boxes = document.querySelectorAll('.Boxes');
const navContainer = document.querySelector('.nav-container');
const navItems = document.querySelectorAll('.nav-item');
const lines = document.querySelectorAll('.line');

window.addEventListener('scroll', function() {
  // 先判断是否有任何一个盒子处于触发区域
  const hasActiveBox = Array.from(boxes).some(box => {
    const boxRect = box.getBoundingClientRect();
    return boxRect.top <= 100 && boxRect.bottom >= 100;
  });

  if (hasActiveBox) {
    navContainer.style.backgroundColor = "#6a994e";
    navItems.forEach((item) => {
      item.style.color = "white";
    })
    lines.forEach((line) => {
      line.style.backgroundColor = "white";
    })
  } else {
    navContainer.style.backgroundColor = "white";
    navItems.forEach((item) => {
      item.style.color = "#6a994e";
    })
    lines.forEach((line) => {
      line.style.backgroundColor = "#6a994e";
    })
  }
});

进阶优化：用CSS类切换样式，代码更简洁易维护 #

如果可以的话，推荐用CSS类来管理样式状态，而不是直接修改style属性，这样代码会清爽很多：

1. 先在CSS里定义导航激活状态的类：

.nav-container.active {
  background-color: #6a994e;
}
.nav-container.active .nav-item {
  color: white;
}
.nav-container.active .line {
  background-color: white;
}

2. 然后JS里只需要切换这个类即可：

const boxes = document.querySelectorAll('.Boxes');
const navContainer = document.querySelector('.nav-container');

window.addEventListener('scroll', function() {
  const hasActiveBox = Array.from(boxes).some(box => {
    const boxRect = box.getBoundingClientRect();
    return boxRect.top <= 100 && boxRect.bottom >= 100;
  });

  // 一行代码切换激活类，CSS会自动处理所有关联样式
  navContainer.classList.toggle('active', hasActiveBox);
});

这样不仅代码量少了一大半，后续要修改样式也只需要调整CSS，不用动JS逻辑，维护起来超方便😉

备注：内容来源于stack exchange，提问作者Lisa