使用Intersection Observer切换Navbar颜色时进入第三区块触发位置偏移如何修复

两个核心因素导致触发偏移：

1. IntersectionObserver默认从视口最顶部开始计算交叉状态，但你的导航栏是fixed固定在顶部，高度为8rem，交叉判断的参考线没有扣除导航栏高度，就会提前触发状态切换
2. 当前仅监听了sectionTwo的交叉状态，没有覆盖sectionThree的切换逻辑，状态切换的边界判断不完整

JavaScript 部分 #

const header = document.querySelector("header")
const sectionTwo = document.querySelector(".two")

// 配置交叉观察器参数
const observerOptions = {
  // 顶部偏移-8rem，把交叉判断的上边界移动到导航栏底部，和区块边界对齐
  rootMargin: "-8rem 0px 0px 0px",
  threshold: 0
}

const navObserver = new IntersectionObserver(function(entries) {   
  entries.forEach(entry => {
    // 只有sectionTwo处于交叉状态时，导航切换为深色文字
    header.classList.toggle("nav-scrolled", entry.isIntersecting)
  });
}, observerOptions);

navObserver.observe(sectionTwo)

CSS 优化（可选，解决导航内容溢出问题） #

header {
  --text: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 8rem;
  z-index: 10000;
  /* 替换原有padding，避免导航内容错位 */
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

修改后导航会完全对齐区块边界切换颜色：

• 处于区块一、区块三时，导航文字为默认白色
• 只要区块二的顶部进入导航栏下方区域，导航立刻切换为黑色，没有提前触发的偏移问题

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