javascript - 在 Scroll 上做点什么

Question

如果我想为滚动的元素设置动画，最好的方法是什么？ 因为我注意到它在滚动时有点滞后。 我应该这样添加类(class)吗？

$(window).scroll(function() {
   if($(this).scrollTop() > 500) {
     $(".element").addClass("animateElement");
   }
}

或者像这样制作一面旗帜。

animateFlag = true;

$(window).scroll(function() {
   if($(this).scrollTop() > 500) {
     if(animateFlag) {
         $(".element").addClass("animateElement");
         animateFlag = false;
      }
   }
}

Answer 1

为滚动上的内容设置动画的最佳方法是编写最优化的代码。例如，您可以将 Vanilla JS 与您描述的标志一起使用，并在滚动之前查询元素，这将导致如下结果:

var animateFlag = true
var element = document.querySelector(".element")

window.addEventListener("scroll", function() {
  if(this.pageYOffset > 0) {
    if(animateFlag) {
      element.classList.add("animateElement");
      animateFlag = false;
    }
  }
})

.element {
  background: yellow;
  width: 200px;
  height: 200px;
  margin-bottom: 1000px;
}

.element.animateElement {
  background: red;
}

<div class="element"></div>