Question

我有一个在滚动到某一点时触发的功能，该功能可以工作但不知何故每次我向下滚动时都会保持重置，有没有办法只在它到达某一点时触发它并且单独某个点？ / p>

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

Answer 2

它一直在重置，因为它总是在开火，我建议添加全局变量，在我的情况下，我称之为doAnimate，它将检查动画是否为真触发器，如果不是意味着它已经触发，我将在每次滚动到顶部时重置。

$(document).ready(function(){
var doAnimate = true;
function someFunction() {
if(doAnimate){
$(".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();
  })
}
doAnimate = false;
}

var flag = false;
$(document).scroll(function(){

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

if (scrollPos >= 250 && flag === false) {
flag = true;
someFunction();
} 
// when it reach the top again  reset all 
if(scrollPos == 0)
  {
 flag = false;
  $("p").css("display", "none");
    doAnimate = true;
  }
})
})

每次滚动触发点时，功能都会保持重置

2 个答案: