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

这个问题在这里已经有了答案：

滚动38个答案后，检查元素是否可见

---

那么，你是如何努力使它工作的？ 根据该插件的文档， .visible()返回一个布尔值，指示该元素是否可见。 所以你会这样使用它：

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

---

检查元素在不带插件的视口中是否可见：

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

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

现在您可以编写一个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
    }
});

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

链接地址: http://www.djcxy.com/p/83331.html

上一篇: Jquery check if element is visible in viewport

下一篇: How to tell what fraction of element is inside viewport?