使用 jquery 检查元素在视口中是否可见：

首先确定元素的顶部和底部位置。然后通过将滚动位置添加到视口高度来确定视口底部的位置（相对于页面顶部）。

如果视口的底部位置大于元素的顶部位置并且视口的顶部位置小于元素的底部位置，则该元素在视口中（至少部分）。简单来说，当元素的任何部分位于视口的顶部和底部边界之间时，该元素在屏幕上可见。

现在您可以编写 if/else 语句，其中 if 语句仅在满足上述条件时运行。

下面的代码执行上面解释的内容：

// this function runs every time you are scrolling

$(window).scroll(function() {
    var top_of_element = $("#element").offset().top;
    var bottom_of_element = $("#element").offset().top + $("#element").outerHeight();
    var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
    var top_of_screen = $(window).scrollTop();

    if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
        // the element is visible, do something
    } else {
        // the element is not visible, do something else
    }
});

这个答案是对 Chris Bier 和 Andy 在下面讨论的内容的总结。我希望它可以帮助其他像我一样在做研究时遇到这个问题的人。我还使用了以下问题的答案来制定我的答案：滚动位置时显示 Div。

您可以编写这样的 jQuery 函数来确定元素是否在视口中。

在包含 jQuery 之后在某处包含它：

$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};

示例用法：

$(window).on('resize scroll', function() {
    if ($('#Something').isInViewport()) {
        // do something
    } else {
        // do something else
    }
});

请注意，这仅检查元素的顶部和底部位置，它不会检查元素是否水平位于视口之外。

根据该插件的文档，.visible()返回一个布尔值，指示元素是否可见。所以你会像这样使用它：

if ($('#element').visible(true)) {
    // The element is visible, do something
} else {
    // The element is NOT visible, do something else
}

你可以看到这个例子。

// Is this element visible onscreen?
var visible = $(#element).visible( detectPartial );

检测部分：

• True : 整个元素可见
• false ：元素的一部分是可见的

visible 是布尔变量，指示元素是否可见。

var visible = $(".media").visible();