向上/向下滚动时触发一次功能

Question

我需要通过触发一些功能在网站上向上/向下滚动窗口上加载两个不同的动画图形，它可以工作，但它有缺陷，因为滚动时触发了太多次：

$(window).scroll(function() {
var scroll = $(window).scrollTop(),
headerHeight = $('.navbar').outerHeight();
if(scroll > headerHeight) {
loadLogoAnimeDown();
}else{
loadLogoAnimeUp();
}
}); 

Answer 1

您需要一种方法来检查函数是否已被调用(以及徽标是否已加载(，因此您可以为此使用变量。加载徽标后，将变量设置为false，这样可以防止它们多次加载。

var downNotLoaded = true;
var upNotLoaded = true;
$(window).scroll(function() {
var scroll = $(window).scrollTop(),
headerHeight = $('.navbar').outerHeight();
if(scroll > headerHeight) {
if(downNotLoaded){
loadLogoAnimeDown();
downNotLoaded = false;
}
}else{
if(upNotLoaded){
loadLogoAnimeUp();
upNotLoaded = false;
}
}

})；

Answer 2

我想你可能会发现这是一种非常巧妙的方法，但这应该有效。

var animated;
$(window).scroll(function() {
var scroll = $(window).scrollTop(),
headerHeight = $('.navbar').outerHeight();
if(scroll > headerHeight) {
if (animated == true) {
loadLogoAnimeDown();
animated = false;
}
} else{
if (animated == false) {
loadLogoAnimeUp();
animated = true;
}
}
});