jQuery从顶部

Question

我希望检查当前元素是否在视图中。我用这个条件检查：

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

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

现在我只是减少了萤火虫的高度（因此滚动条的大小减小了）：

所以我无法使用$(window).scrollTop()来了解我在页面中滚动的内容 如何定义元素是否在视图中的任何其他方式？

Answer 1

您需要考虑以下4个基本值：

• 窗户的高度
• 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');

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

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