Jquery check if element is visible in viewport [du

2019-01-02 20:31发布

站内问答 / JavaScript
1990 6 5

This question already has an answer here:

Function to check if the div class "media" is within the browsers visual viewport regardless of the window scroll position.

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

</BODY>
</HTML>

Trying to use this plugin https://github.com/customd/jquery-visible with this function but I don't know how to make it work. 

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

6条回答
伤终究还是伤i
2楼-- · 2019-01-02 20:44 
var visible = $(".media").visible();
查看更多
0人赞 添加讨论(0) 举报
余欢
3楼-- · 2019-01-02 20:50

You can write a jQuery function like this to determine if an element is in the viewport.

Include this somewhere after jQuery is included:

$.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;
};

Sample usage:

$(window).on('resize scroll', function() {
    if ($('#Something').isInViewport()) {
        // do something
    } else {
        // do something else
    }
});

Note that this only checks the top and bottom positions of elements, it doesn't check if an element is outside of the viewport horizontally.

查看更多
0人赞 添加讨论(0) 举报
唯独是你
4楼-- · 2019-01-02 20:57

Here's a way to do it without a plugin:

First get the position of the element. Then add the scroll position and the viewport height together.

If the combination of the scroll position and viewport height is greater than or equal to the element position, it's in the viewport.

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
}
查看更多
0人赞 添加讨论(0) 举报
人气声优
5楼-- · 2019-01-02 21:00

Well, how did you try to make it work? According to the documentation for that plugin, .visible() returns a boolean indicating if the element is visible. So you'd use it like this:

if ($('#element').visible(true)) {
    // The element is visible, do something
} else {
    // The element is NOT visible, do something else
}
查看更多
0人赞 添加讨论(0) 举报
与风俱净
6楼-- · 2019-01-02 21:03

You can see this example.

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

detectPartial :

  • True : the entire element is visible
  • false : part of the element is visible

visible is boolean variable which indicates if the element is visible or not.

查看更多
0人赞 添加讨论(0) 举报
姐姐魅力值爆表
7楼-- · 2019-01-02 21:05

Check if element is visible in viewport without plugin:

First determine the top and bottom positions of the element. Then determine the position of the viewport's bottom (relative to the top of your page) by adding the scroll position to the viewport height.

If the bottom position of the viewport is greater than the element's top position AND the top position of the viewport is less than the element's bottom position, the element is in the viewport (at least partially). In simpler terms, when any part of the element is between the top and bottom bounds of your viewport, the element is visible on your screen.

Now you can write an if/else statement, where the if statement only runs when the above condition is met.

The code below executes what was explained above:

// 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
    }
});

This answer is a summary of what Chris Bier and Andy were discussing below. I hope it helps anyone else who comes across this question while doing research like I did. I also used an answer to the following question to formulate my answer: Show Div when scroll position.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)