<分区>
<分区>
无论窗口滚动位置如何，检查 div 类“媒体”是否在浏览器可视视口(viewport)内的功能。
<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 );
最佳答案
您可以像这样编写一个 jQuery 函数来确定元素是否在视口(viewport)中。
在包含 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
}
});
请注意，这只会检查元素的顶部和底部位置，不会检查元素是否在水平视口(viewport)之外。
关于javascript - Jquery 检查元素在视口(viewport)中是否可见，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54293320/