jQuery |当用户滚动时显示div

Question

我正在寻找解决方案，以在用户（水平）滚动时显示div，并在用户停止滚动时隐藏div。我发现了一些代码，它显示了一个div，但不会在滚动后隐藏它。

$(function(){ 
tiles = $("ul#tiles li").fadeTo(0, 0); 

$(window).scroll(function(d,h) { 
    tiles.each(function(i) { 
     a = $(this).offset().top + $(this).height(); 
     b = $(window).scrollTop() + $(window).height(); 
     if (a < b) $(this).fadeTo(500,1); 
    }); 
}); 

});//]]> 

Answer 1

我不太确定，但也许这会工作？

$(function(){ 
tiles = $("ul#tiles li").fadeTo(0, 0); 

$(window).scroll(function(d,h) { 
    tiles.each(function(i) { 
     a = $(this).offset().top + $(this).height(); 
     b = $(window).scrollTop() + $(window).height(); 
     if (a < b) 
      $(this).fadeTo(500,1); 
     else 
      $(this).fadeOut(); 
    }); 
}); 

});//]]> 

Answer 2

由于您的fadeTo(0,0)只运行一次，滚动完成后不再运行。

您可以为scroll事件添加事件处理程序并开始超时。例如：

var timer = null; 
$(window).addEventListener('scroll', function() { 
    if(timer !== null) { 
     clearTimeout(timer);   
    } 
    timer = startTimeout(function() { 
      // do something 
    }, 150); 
}, false); 

这将启动超时并等待150ms。如果在此期间发生新的scroll事件，则会中止计时器并创建新计时器。否则，该功能将被执行。您可能必须调整时间。

还要注意的是IE使用一种不同的方式把事件侦听器，这应该给一个很好的介绍：quirksmode - Advanced event registration models