如何确定HTML元素是否在屏外？

如何确定使用jQuery给定元素位于可视窗口区域的顶部或底部下方？ 这将允许我确定该项目是否在屏幕外以及在哪个方向。

理想的情况是：

var topPos = $(this).relativeToTop(); var bottomPos = $(this).relativeToBottom(); var isOnScreen = topPos >= 0 && bottomPos >= 0; 

某个地方是否有插件或示例在线？

Answer 1

 var off = $(this).offset(); var t = off.top; var l = off.left; var h = $(this).height(); var w = $(this).width(); var docH = $(window).height(); var docW = $(window).width(); var isEntirelyVisible = (t > 0 && l > 0 && t + h < docH && l+ w < docW); 

编辑在那里的某个地方，也可以检查$（document）.scrollTop（），具体取决于你希望脚本处理滚动状态的方式......

Answer 2

感谢大卫的post，它帮助我解决了我的“完全可见元素”问题，但是我不得不将建议定制到以下，因为我的父div区域大于可见窗口大小。 以下代码适用于我，虽然我只需要担心垂直。

elem是一个jquery对象，这可能只适用于html5

 function isFullyVisible (elem) { var off = elem.offset(); var et = off.top; var el = off.left; var eh = elem.height(); var ew = elem.width(); var wh = window.innerHeight; var ww = window.innerWidth; var wx = window.pageXOffset; var wy = window.pageYOffset; return (et >= wy && el >= wx && et + eh <= wh + wy && el + ew <= ww + wx); }