Question

检查div类“media”是否在浏览器可视视口内，而不管窗口滚动位置如何。

<HTML>
<HEAD>
  <TITLE>My first HTML document</TITLE>
</HEAD>
<BODY>
  <div class="main">
   <div class="media"></div>
  </div>

</BODY>
</HTML>

尝试将此插件https://github.com/customd/jquery-visible与此功能一起使用但是我不知道如何让它发挥作用。

$('#element').visible( true );

Answer 1

使用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在下面讨论的内容。我希望在像我这样做研究时帮助其他遇到这个问题的人。我还用以下问题的答案来表达我的答案：Show Div when scroll position。

Answer 2

您可以编写这样的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
    }
});

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

Answer 3

嗯，你是怎么试图让它发挥作用的？根据该插件的文档，.visible()返回一个布尔值，指示该元素是否可见。所以你会这样使用它：

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

Answer 4

您可以看到this example。

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

detectPartial：

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

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

Answer 5

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

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

5 个答案: