检查 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 https://github.com/customd/jquery-visible有了这个功能但是
我不知道如何让它发挥作用。
$('#element').visible( true );
您可以编写一个像这样的 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
}
});
请注意,这仅检查元素的顶部和底部位置,它不会检查元素是否水平位于视口之外。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)