使用IntersectionObserver实现滚动切换固定栏标题，向上滚动失效问题求解

之前使用IntersectionObserver实现标题切换失效的核心原因，是默认的观察配置没有匹配全屏区块的交互特性：

• 默认阈值为0时，只要元素和视口有1px重叠就会触发判定
• 没有自定义视口的有效判定范围，向上滚动时多个全屏区块会同时和视口重叠，导致判定逻辑冲突，最终只有滚动到第一个区块的位置时才会触发回调

核心思路是把IntersectionObserver的有效观察区域，从整个全屏视口收窄到屏幕正中间的窄横条——不管滚动方向是上还是下，哪个区块穿过这条窄横条，就判定为当前处于可视状态的区块，读取它的data-section-title更新固定栏文本即可。
具体实现不需要复杂的滚动位置监听计算，仅靠调整观察器配置就能解决问题，调整要点：

• 给观察器设置rootMargin: '-45vh 0px'，相当于把实际参与判定的视口区域，从100vh全高压缩为屏幕正中间10vh高度的窄条
• 因为每个区块本身就是100vh全高，任意滚动位置下，只会有一个区块和这条窄条相交，完全不会出现多元素同时命中的判定冲突
  完整实现代码：

// 获取固定栏标题节点、所有章节区块
const titleEl = document.querySelector('.section--title');
const sectionList = document.querySelectorAll('section');

const sectionObserver = new IntersectionObserver((entries) => {
  entries.forEach(item => {
    if (item.isIntersecting) {
      // 命中判定区域时，更新标题文本
      titleEl.textContent = item.target.dataset.sectionTitle;
    }
  })
}, {
  // 关键配置：收窄判定区域到屏幕中间
  rootMargin: '-45vh 0px',
  threshold: 0
});

// 给所有章节绑定观察
sectionList.forEach(section => sectionObserver.observe(section));

可选优化：给固定栏标题加简单的过渡效果，让文本切换时更顺滑

.section--title {
  transition: opacity 0.3s ease;
}

调整后的逻辑对向上、向下滚动的判定标准完全一致，不会出现滚动方向不同时触发时机偏差的问题，也不需要挂载高频的scroll监听做位置差计算，不会造成页面滚动卡顿。

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