JavaScript Intersection Observer无报错却失效，请求问题排查

需求：.bubble元素需与当前激活的section背景渐变一致，并覆盖对应导航项，但Intersection Observer无报错却不工作，控制台显示forEach未执行。

错误原因分析 #

1. 脚本加载时机错误：JS脚本放在<head>中，DOM尚未完成渲染就执行，导致document.querySelectorAll('section')无法获取到元素，最终sections.forEach未执行，Observer没有绑定到任何section上。
2. CSS选择器语法错误：nav ul div. bubble中类名前多了空格，导致样式无法应用到.bubble元素。
3. 坐标定位逻辑错误：getBoundingClientRect()返回的是元素相对视口的坐标，但.bubble是相对于header（position: sticky）定位的，直接使用视口坐标会导致滚动时位置偏移。
4. 缺少初始状态初始化：页面加载时未设置气泡的初始位置和背景，导致初始状态下气泡显示异常。

修复方案 #

1. 调整脚本加载位置 #

将JS脚本移至</body>标签前，确保DOM完全渲染后再执行代码。

2. 修正CSS选择器 #

将nav ul div. bubble改为nav ul div.bubble，移除类名前的多余空格。

3. 修复坐标计算逻辑 #

获取header的视口坐标，用导航项的视口坐标减去header的坐标，得到相对header的位置，避免滚动偏移。

4. 添加初始状态初始化 #

页面加载时手动触发一次Intersection Observer的回调逻辑，设置初始气泡状态。

修复后的完整代码 #

HTML #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="newproject.css" />
  <title>lbl</title>
</head>

<body>
  <header>
    <nav>
      <h1 class="page-name">Lips By Lams</h1>
      <ul>
        <li><a data-page="home" href="#home">Home</a></li>
        <li><a data-page="about-us" href="#about-us">About Us</a></li>
        <li>
          <a data-page="contact-page" href="#contact-us">Contact Page</a>
        </li>
        <div class="bubble"></div>
      </ul>
    </nav>
  </header>
  <main>
    <section id="home" data-index="0" class="home">
      <h2>home page</h2>
    </section>
    <section id="about-us" data-index="1" class="about-us">
      <h2>about us</h2>
    </section>
    <section id="contact-us" data-index="2" class="contact-page">
      <h2>contact page</h2>
    </section>
  </main>
  <!-- 脚本移至body末尾 -->
  <script src="gpt.js"></script>
</body>

</html>

CSS #

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

header {
  box-shadow: 0px 5px 10px -5px rgba(0, 0, 0, 0.3);
  position: sticky;
  top: 0px;
  background-color: #fff;
  /* 添加position: relative，让bubble相对于header定位 */
  position: relative;
}

nav {
  min-height: 10vh;
  margin: auto;
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul,
nav h1 {
  font-size: 1.5rem;
  flex: 1;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
}

nav a {
  color: black;
  text-decoration: none;
  /* 给a标签添加padding，让气泡能完全覆盖 */
  padding: 0.5rem 1rem;
}

/* 修正选择器 */
nav ul div.bubble {
  position: absolute;
  z-index: -1;
  background: linear-gradient(to right top, #ffb88c, #de6262);
  transform: scale(1.1);
  transition: all 0.5s ease;
  border-radius: 0.2rem;
}

section {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

section h2 {
  font-size: 5rem;
  color: white;
}

.home {
  background: linear-gradient(to right top, #ffb88c, #de6262);
}

.about-us {
  background: linear-gradient(to right top, #a73737, #7a2828);
}

.contact-page {
  background: linear-gradient(to right top, #ed4264, #ffedbc);
}

JavaScript #

// variable names
const sections = document.querySelectorAll('section');
const bubble = document.querySelector('.bubble');
const gradient = [
  'linear-gradient(to right top, #ffb88c, #de6262)',
  'linear-gradient(to right top, #a73737, #7a2828)',
  'linear-gradient(to right top, #ed4264, #ffedbc)',
];

//options
let options = {
  threshold: 0.3,
  rootMargin: '0px',
  root: null,
};

// observer function
let observer = new IntersectionObserver(navCheck, options);

// navCheck function
function navCheck(scrolls) {
  scrolls.forEach((scroll) => {
    if (!scroll.isIntersecting) return;
    
    const classId = scroll.target.className;
    const activeAnchor = document.querySelector(`[data-page="${classId}"]`);
    if (!activeAnchor) return;
    
    const gradientIndex = parseInt(scroll.target.getAttribute('data-index'));
    const coords = activeAnchor.getBoundingClientRect();
    const headerRect = document.querySelector('header').getBoundingClientRect();
    
    const directions = {
      height: coords.height,
      top: coords.top - headerRect.top,
      width: coords.width,
      left: coords.left - headerRect.left,
    };
    
    bubble.style.background = gradient[gradientIndex];
    bubble.style.setProperty('left', `${directions.left}px`);
    bubble.style.setProperty('top', `${directions.top}px`);
    bubble.style.setProperty('width', `${directions.width}px`);
    bubble.style.setProperty('height', `${directions.height}px`);
  });
}

// 绑定Observer到所有section
sections.forEach((section) => {
  observer.observe(section);
});

// 初始化气泡状态
if (sections.length > 0) {
  navCheck([{ target: sections[0], isIntersecting: true }]);
}

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