Javascript 在滚动时删除类

Question

我编写了一个脚本，一旦滚动超过 .section-2，就将名为 anotherclass 的类添加到 .section-3。

但是现在我试图从 #section-3 中删除类，一旦它向上滚动并超过 .section-2 甚至 .section-1 .

window.addEventListener('scroll', function() {
  var elementTarget = document.querySelector('.section-2');
  if (window.scrollY > (elementTarget.offsetTop + elementTarget.offsetHeight)) {
    document.querySelector('.section-3').classList.add('anotherclass');
  }
});

.section-0 {
  height: 1100px;
  width: 100%;
  background: purple;
}

.section-1 {
  height: 800px;
  width: 100%;
  background: green;
}

.section-3 {
  height: 1800px;
  width: 100%;
  background: orange;
}

<div class="section-0"></div>
<div class="section-1"></div>
<div class="section-2">Scroll past this div</div>
<div class="section-3"></div>

代码笔:https://codepen.io/MistaPrime/pen/XWWYeBZ

Answer 1

假设您想要一个仅涵盖该元素的解决方案，而不是更通用的元素，您只需向现有事件监听器添加一个 else 子句并调用 classList.remove:

window.addEventListener('scroll', function() {
  var elementTarget = document.querySelector('.section-2');
  if (window.scrollY > (elementTarget.offsetTop + elementTarget.offsetHeight)) {
      document.querySelector('.section-3').classList.add('anotherclass');
  } else {
      document.querySelector('.section-3').classList.remove('anotherclass');
  }
});