如何檢測元素是否不顯示在屏幕上進行滾動？

Question

當用戶在我的網站上向下滾動時，我想檢測頂部標題何時不在視圖中。這可能與jQuery的？

Answer 1

正如@RoryMcCrossan提到的，你可以自己計算它。

如果你想多一點flexibillity，試試這個jQuery插件：

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

它會告訴你查詢基於元素是否是可見的視口內的DOM。

例如：

$("div:in-viewport") 

只會返回div S中的當前可見。

您還可以根據它們的位置查詢不可見的元素。主要：

$(":below-the-fold") 
$(":above-the-top") 
$(":left-of-screen") 
$(":right-of-screen") 

查看上面的鏈接瞭解更多信息和下載。

---

如果你想使用這個庫來查詢元素目前沒有顯示，
不管他們在哪裏，然後使用此：

$("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

你需要t檢查元素的位置，使用offset()針對窗口滾動的位置。類似這樣的：

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