如何将可见section的样式类同步至body标签并实现切换？

需求说明 #

• 当section 1或4可见时，给body添加.black-bold类
• 当section 2或5可见时，给body添加.grey类
• 当section 3或6可见时，给body添加.white-bold类
• 滚动页面切换可见section时，同步更新body的类

解决方案 #

使用IntersectionObserver API高效监听section的可见状态，相比scroll事件监听，它能避免频繁触发带来的性能问题，原生支持精准的可见性检测。

JavaScript代码

// 定义所有需要切换的颜色类
const colorClasses = ['black-bold', 'grey', 'white-bold'];
const body = document.body;

// 创建IntersectionObserver实例，配置可见阈值
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 当section进入视口且可见比例超过50%时触发更新
    if (entry.isIntersecting && entry.intersectionRatio > 0.5) {
      // 从当前section的class中提取目标颜色类
      const targetClass = colorClasses.find(cls => entry.target.classList.contains(cls));
      if (targetClass) {
        // 移除body上所有旧的颜色类，添加新类
        body.classList.remove(...colorClasses);
        body.classList.add(targetClass);
      }
    }
  });
}, {
  root: null, // 以视口为检测根容器
  threshold: 0.5 // 可见比例超过50%时触发回调
});

// 监听页面中所有section元素
document.querySelectorAll('section').forEach(section => {
  observer.observe(section);
});

// 页面初始化时，给body添加第一个可见section的颜色类
const initialVisibleSection = Array.from(document.querySelectorAll('section')).find(section => {
  const rect = section.getBoundingClientRect();
  return rect.top <= window.innerHeight / 2 && rect.bottom >= window.innerHeight / 2;
});
if (initialVisibleSection) {
  const initialClass = colorClasses.find(cls => initialVisibleSection.classList.contains(cls));
  body.classList.add(initialClass);
}

代码解释

1. 颜色类统一管理：用数组存所有需要切换的颜色类，方便批量移除旧类，避免遗漏。
2. 可见性阈值设置：把阈值设为0.5，确保section占据视口一半以上才触发更新，避免滚动时频繁切换。
3. 初始化处理：页面加载完成后自动检测初始可见的section，给body添加对应类，避免初始状态无样式的问题。

完整可运行代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>同步section颜色类到body</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      transition: background-color 0.3s, color 0.3s; /* 添加过渡动画，切换更平滑 */
    }

    section {
      width: 100%;
      height: 400px;
      padding: 100px;
      box-sizing: border-box; /* 避免padding撑大section宽度 */
    }

    .black-bold, .grey, .white-bold {
      background-color: var(--siteBackgroundColor);
      color: var(--paragraphMediumColor);
    }

    .black-bold {
        --siteBackgroundColor: rgba(0,0,0,1);
        --paragraphMediumColor: rgba(255,255,255,1);
    }

    .grey {
        --siteBackgroundColor: rgba(238, 238, 238, 1);
        --paragraphMediumColor: rgba(0,0,0,1);
    }

    .white-bold {
        --siteBackgroundColor: rgba(255,255,255,1);
        --paragraphMediumColor: rgba(0,0,0,1);
    }
  </style>
</head>
<body>
  <section class="section1 black-bold">
    <p>section 1</p>
  </section>
  <section class="section2 grey">
    <p>section 2</p>
  </section>
  <section class="section3 white-bold">
   <p>section 3</p>
  </section>
  <section class="section4 black-bold">
    <p>section 4</p>
  </section>
  <section class="section5 grey">
    <p>section 5</p>
  </section>
  <section class="section6 white-bold">
   <p>section 6</p>
  </section>

  <script>
    const colorClasses = ['black-bold', 'grey', 'white-bold'];
    const body = document.body;

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting && entry.intersectionRatio > 0.5) {
          const targetClass = colorClasses.find(cls => entry.target.classList.contains(cls));
          if (targetClass) {
            body.classList.remove(...colorClasses);
            body.classList.add(targetClass);
          }
        }
      });
    }, {
      root: null,
      threshold: 0.5
    });

    document.querySelectorAll('section').forEach(section => {
      observer.observe(section);
    });

    const initialVisibleSection = Array.from(document.querySelectorAll('section')).find(section => {
      const rect = section.getBoundingClientRect();
      return rect.top <= window.innerHeight / 2 && rect.bottom >= window.innerHeight / 2;
    });
    if (initialVisibleSection) {
      const initialClass = colorClasses.find(cls => initialVisibleSection.classList.contains(cls));
      body.classList.add(initialClass);
    }
  </script>
</body>
</html>

额外优化说明 #

• 给body添加了过渡动画，让背景色和文字颜色的切换更平滑，提升用户体验。
• 给section设置box-sizing: border-box，避免padding导致元素宽度超出视口。
• 合并了重复的CSS规则，精简代码结构。

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