jquery检查元素是否在视口中可见
用于检查div类“media”是否在浏览器可视视口内的function，而不pipe窗口滚动位置如何。
<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与这个function，但我不知道如何使其工作。
$('#element').visible( true );
那么，你是如何努力使其工作？ 根据该插件的文档， .visible()返回一个布尔值，指示该元素是否可见。 所以你会这样使用它：
if ($('#element').visible(true)) { // The element is visible, do something } else { // The element is NOT visible, do something else }
我使用的另一个jQuery插件是添加视口select器的。 因此，不要检查布尔值，而要根据可见性select元素：
$('#element:in-viewport').doSomething();
检查元素在不带插件的视口中是否可见：
首先确定元素的顶部和底部位置。 然后通过向视口高度添加滚动位置来确定视口底部的位置（相对于页面的顶部）。
如果视口的底部位置大于元素的顶部位置，并且视口的顶部位置小于元素的底部位置，则元素位于视口中（至less部分）。 简单来说，当元素的任何部分位于视口的顶部和底部之间时，元素在屏幕上可见。
现在，您可以编写一个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 } });
这只检查项目的顶部和底部位置，不检查项目是否在水平方向上在视口外部。
你可以看到这个例子 。
// Is this element visible onscreen? var visible = $(#element).visible( detectPartial );
detectPartial：
- 真：整个元素是可见的
- false：元素的一部分是可见的
visible是布尔variables，表示元素是否可见。
var visible = $(".media").visible();
这是一个没有插件的方法：
首先得到元素的位置。 然后将滚动位置和视口高度一起添加。
如果滚动位置和视口高度的组合大于或等于元素位置，则位于视口中。
var element_position = $("#element").offset().top; var scroll_position = $(window).scrollTop(); var viewport_height = $(window).height(); if((scroll_position + viewport_height) > element_position){ // Do something because the element is in the viewport }
