ページが上にスクロールされている場合にのみタグを表示

Question

ユーザーがjQueryを下にスクロールするかどうかを検出するにはどうすればよいですか？私は、ブラウザがトップの300px以内にあるときにのみ固定divを表示したい。ユーザーが300ピクセルのマークを下にスクロールすると、それは消えるはずです。ユーザーが上にスクロールバックすると、非表示にする必要があります。これはどうすればいいですか？

Answer 1

がウィンドウにスクロールリスナーをアタッチします： http://docs.jquery.com/Events/scroll

次にウィンドウのscrollTopスプライトを確認してください。 http://docs.jquery.com/CSS

とき

EDITを（私はそれをテストしていません） scrollTopが300未満の場合はdivを表示し、そうでない場合はhide（）します。

Answer 2

var docElem = $(document.documentElement) 
docElem.scroll(function(e) { 
    if(docElem.scrollTop() < 300) { 
     whatever.show(); 
    } else { 
     whatever.hide(); 
    } 
}); 

ブラウザごとに異なる要素（docElem）を使用する必要があるかもしれませんが、これはFirefoxでも有効です。もっとjQueryの

Answer 3

scrollTopとscrollYあなたがIEとFirefoxで始めるように見えます。他のブラウザについてはわかりません。

Answer 4

ただ、スクロールイベントの窓scrollTopスプライトの位置を確認し、要素offsetTop位置と比較：

$(window).scroll(function(e){ 
    $el = $('.myElement'); 
    if ($(this).scrollTop() > $el.offset().top){ 
    $el.hide(); 
    } else { 
    $el.show(); 
}); 

実行この例hereを。