確定元素是否在屏幕上

Question

有沒有辦法通過使用jQuery來確定某個元素當前是否在用戶的屏幕/視口上可見？ （不使用其他外部庫）

Answer 1

不能直接使用默認jQuery的，但你可以實現自己的功能，你可以用它之後一個jQuery的元素：

(function ($) { 
    $.fn.isOnScreen = function() { 
     var topView = $(window).scrollTop(); 
     var botView = topView + $(window).height(); 
     var topElement = this.offset().top; 
     var botElement = topElement + this.height(); 
     return ((botElement <= botView) && (topElement >= topView)); 
    } 
})(jQuery); 

添加此代碼後，你可以調用$('#yourElementId').isOnScreen()如果整個元素在屏幕上將返回true，如果不是，則返回false。

您也可以玩弄它一下，所以它會返回true如果至少元件的四分之一是在屏幕上可見，例如像這樣：

(function ($) { 
    $.fn.isOnScreen = function() { 
     var topView = $(window).scrollTop(); 
     var botView = topView + $(window).height(); 
     var topElement = this.offset().top; 
     var botElement = topElement + (this.height()/4); //<--- 
     return ((botElement <= botView) && (topElement >= topView)); 
    } 
})(jQuery);