确定元素是否在屏幕上

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);