如果部分在视口中，则向 div 添加/删除类（vanilla JS）答案

【问题标题】：Add/remove class to div if section is in viewport (vanilla JS)如果部分在视口中，则向 div 添加/删除类（vanilla JS）
【发布时间】：2021-10-14 22:05:31
【问题描述】：

我有一个包含 5 个部分的 onepager，每个部分的最小高度为 100vh 和一个 id。然后有一个固定的背景 div，它会在新部分进入视口时改变其状态。

<div class="background"></div>

<section id="s1">...</section>
<section id="s2">...</section>
<section id="s3">...</section>
<section id="s4">...</section>
<section id="s5">...</section>

我想在部分进入视口时使用具有当前部分 id 名称的类来更新背景 div，并在部分离开视口时将其删除。

这是我做的：

const sections = document.querySelectorAll('section')
const bg = document.querySelector('div.background')

document.addEventListener('scroll', updateBg)

function updateBg() {
  sections.forEach((section) => {
    const pixels = window.pageYOffset
    const sectionId = section.getAttribute('id')
    const offsetBottom = section.offsetTop + section.offsetHeight

    if (section.offsetTop <= pixels) {
      bg.classList.add(sectionId)
    }

    else if (offsetBottom >= pixels) {
        bg.classList.remove(sectionId)
      }

    else {
      bg.classList.remove(sectionId)
    }
  })
}

当部分进入视口时添加当前类可以正常工作。但是当部分离开视口时，它并没有删除类，就像我在else if (offsetBottom >= pixels) 声明中声明的那样。当我完全向下滚动页面时，我有这样的东西：

<div class="background s1 s2 s3 s4 s5"></div>

但我最后想要的是： <div class="background s5"></div>

有什么帮助吗？

【问题讨论】：

您可能想阅读Intersection Observer

标签： javascript class scroll viewport sections

【解决方案1】：

您的条件似乎不正常。您正在为低于滚动阈值的所有部分设置类。相反，如果该部分的一部分可见，则应添加该类，否则将其删除，如下所示：

if (section.offsetTop <= pixels && offsetBottom > pixels) {
  bg.classList.add(sectionId);
} else {
  bg.classList.remove(sectionId)
}

另外，请阅读这个问题的答案：How can I tell if a DOM element is visible in the current viewport? 建议改用getBoundingClientRect API。

【讨论】：