如果部分在視口中，則向 div 添加/刪除類（vanilla 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>

我想在該部分進入視口時使用具有當前部分 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>

有什么幫助嗎？

Answer 1

你的條件似乎不正常。 您正在為低於滾動閾值的所有部分設置類。 相反，如果該部分的一部分可見，您應該添加該類，否則將其刪除，如下所示：

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

另外，請閱讀此問題的答案： 如何判斷 DOM 元素在當前視口中是否可見？ 建議改用getBoundingClientRect API。