jQuery 从顶部获取当前视图位置

Question

我想检查我的当前元素是否在视图中。我使用这个条件来检查：

if ($(window).scrollTop() > $('.element').offset().top) {
    //show
}

但问题是 $(window).scrollTop() 在不同的浏览器高度上给出不同的结果（我使用的是 FireFox，第一个数字是 .scrollTop()，第二个 - .offset().top）：

现在我只是降低了 firebug 的高度（因此滚动条的尺寸减小了）：

所以我无法使用 $(window).scrollTop() 来了解我在页面中滚动了多少。
还有其他方法如何定义元素是否在视图中？

Answer 1

您需要考虑这 4 个基本值：

Window的身高
Window 的滚动顶部
元素的顶部偏移量
元素的高度

基于此，您将拥有：

var windowHeight = $(window).height();
var windowScrollTop = $(window).scrollTop();
var elementHeight = $(".element").height();
var elementOffsetTop = $(".element").offset().top;

if ((elementOffsetTop <= windowScrollTop + windowHeight) && (elementOffsetTop + elementHeight >= windowScrollTop))
    console.log('Visible on viewport');

请注意，使用此算法，您将能够检查元素在视口上是否可见，与其高度无关，最重要的是，考虑将 window 滚动到元素之外的情况.

当元素的最高部分或最低部分显示在视口上时，表示该元素可见。

jQuery 从顶部获取当前视图位置

jQuery get current view position from top

html

javascript

jquery

position