0

ユーザー（水平）がスクロールしたときに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);
    });
});

});//]]>
4

2 に答える 2

0

実行fadeTo(0,0)は1回だけであり、スクロール終了後は再度実行されないためです。

イベントのイベントハンドラーを追加してscroll、タイムアウトを開始できます。何かのようなもの：

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

これにより、タイムアウトが開始され、150ミリ秒待機します。その間に新しいscrollイベントが発生した場合、タイマーは中止され、新しいイベントが作成されます。そうでない場合、関数は実行されます。おそらくタイミングを調整する必要があります。

また、IEはイベントリスナーをアタッチするために別の方法を使用することに注意してください。これは良い紹介になるはずです：quirksmode-高度なイベント登録モデル

于 2012-09-16T15:51:15.880 に答える
0

よくわかりませんが、これでうまくいくのでしょうか？

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

});//]]>
于 2012-09-16T15:10:26.913 に答える