要素が画面上に表示されていないかどうかを検出する方法はありますか？

Question

ユーザーが自分のウェブサイトをスクロールダウンすると、一番上のヘッダーが見えなくなったときを検出したいと思います。これはjqueryで可能ですか？

Answer 1

@ RoryMcCrossanと同様に、自分で計算することができます。あなたはもう少しflexibillityをしたい場合は

、このjQueryプラグインを試してみてください。それはあなたが要素が見えるビューポート内にあるかどうかに基づいてDOMを照会もらおう

http://www.appelsiini.net/projects/viewport

。例えば

：

$("div:in-viewport") 

は、現在表示されているdiv Sを返します。

また、表示されていない要素がどこにあるかを照会することもできます。主に：

詳細情報とダウンロードについては、上記のリンクを参照してください。

---

あなたが現在示されていない要素を照会するために、このライブラリを使用したい場合は、
かかわらず、彼らがどこにあるのは、この使用：あなたのヘッダーが持っていると仮定すると、そう

$("div").not(":in-viewport") 

---

をheaderのIDは、次のように使用できます。

var $header = $('#header'); 

$(window).scroll(function() 
{ 
    var isVisible = $header.is(':in-viewport'); 
    // Now show, hide, or do whatever you want... 
}); 

Answer 2

o offset()を使用して、ウィンドウのスクロールの位置に対して要素の位置を確認します。このようなもの：

$(window).scroll(function() { 
    var $header = $("#header"); 
    var headerBottomPos = $header.offset().top + $header.height(); 
    if (headerBottomPos < this.scrollTop()) { 
     // header is not being displayed 
    } 
});