添加/删除类div如果节是在视窗(香草JS)

Question

我有一个有5个部分的单页，每个部分的最小高度为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>

我想更新背景div与当前节id的名称类当节进入视口和删除它当节离开视口。

这是我做的:

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)
}
})
}

在section进入视口时添加当前类工作正常。但它并没有删除类当节已经离开视口像我在我的else if (offsetBottom >= pixels)声明声明。当我完全向下滚动页面时，我看到了这样的内容:

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

，但我想在最后是这样的:<div class="background s5"></div>

帮忙吗?

Answer 1

你的情况似乎不太正常。您正在为低于滚动阈值的所有部分设置类。相反，如果部分section可见，则应该添加该类，否则删除该类，如下所示:

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

另外，请阅读这个问题的答案:我怎样才能知道DOM元素在当前视口中是否可见?建议使用getBoundingClientRectAPI。