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

Question

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

理想情况下:

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() ，具体取决于您希望脚本如何处理滚动状态...