在Scroll上做点什么

Do something on Scroll

本文关键字：什么 Scroll      更新时间：2023-09-26

如果我想让一个元素在滚动上动起来，最好的方法是什么?因为我注意到滚动的时候有点滞后。我应该这样添加类吗?

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

在滚动上动画的最好方法是制作最优化的代码。例如，您可以使用香草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>

相关文章：