Vim*_*nsu 86 javascript jquery visible
用于检查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 );
小智 88
使用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.
Tom*_*rek 73
您可以编写这样的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
}
});
请注意,这仅检查元素的顶部和底部位置,而不检查元素是否水平位于视口之外.
Dav*_*vid 50
那么,你是怎么试图让它发挥作用的？根据该插件的文档,.visible()返回一个布尔值,指示该元素是否可见.所以你要像这样使用它:
if ($('#element').visible(true)) {
// The element is visible, do something
} else {
// The element is NOT visible, do something else
}