在 Scroll 上做点什么

Question

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

$(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>