jquery - 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

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

您可以为事件添加事件处理程序scroll并启动超时。就像是：

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

这将启动超时并等待 150 毫秒。如果在此期间发生了新scroll事件，则中止计时器并创建新事件。如果没有，该函数将被执行。您可能需要调整时间。

另请注意，IE 使用不同的方式附加事件侦听器，这应该是一个很好的介绍：quirksmode - Advanced event registration models

Answer 2

我不太确定，但也许这会奏效？

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

});//]]>