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

Question

如何确定使用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

感谢大卫的帖子,它帮助我解决了我的"完全可见元素"问题,但是我不得不根据以下内容定制建议,因为我的父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);  
}