javascript - 每次滚动超过触发点时，功能都会不断重置

Question

我有一个在滚动到某个点时触发的函数，该函数有效但每次我进一步向下滚动时不知何故不断重置，有没有什么方法可以只在它到达那个特定点时触发它并且单独那个特定点？

$(document).ready(function(){

function someFunction() {
$(".someContent .someYellowOverlay").toggleClass("someAnimation").delay(250).queue(function(next){
$(this).css("transform-origin", "right center");
next();
}).delay(125).queue(function(next){
$("p").css("display", "block");
next();
}).delay(250).queue(function(next){
$(this).removeClass("someAnimation");
next();
})
}

$(document).scroll(function(){

var scrollPos = $(document).scrollTop();
console.log(scrollPos)

if (scrollPos >= 250) {
  someFunction();
  setTimeout();
}

})
})

https://codepen.io/alexyap/pen/jmQqvQ?editors=0110

Answer 1

您可以使用一个标志，该标志在第一次滚动大于或等于 250 时设置，并在滚动小于 250 时重置它(如果用户向下滚动、向上滚动和再次向下滚动，它仍然会再次触发)。

$(document).ready(function(){

var flag = false;

function someFunction() {
  $(".someContent .someYellowOverlay").toggleClass("someAnimation").delay(250).queue(function(next    ) {
    $(this).css("transform-origin", "right center");
    next();
  }).delay(125).queue(function(next) {
    $("p").css("display", "block");
    next();
  }).delay(250).queue(function(next) {
    $(this).removeClass("someAnimation");
    next();
  });
}

$(document).scroll(function(){
  var scrollPos = $(document).scrollTop();
  console.log(scrollPos)

  if (scrollPos >= 250 && flag === false) {
    flag = true;
    someFunction();
    setTimeout();
  } else if (scrollPos < 250) {
    flag = false;
  }
});

});

如果您希望事件只发生一次，那么您可以简单地删除额外的 else if 条件，或者您可以考虑使用 jQuery 的 one确保事件只发生一次的方法。

(请注意，您可以根据自己的喜好将标志变量命名为更具描述性的名称，例如 didScroll 或 scrolledGreaterThan250)