Breaking News: Grepper is joining You.com. Read the official announcement!

how to determin if element is in viewport with jquery

Ugly Unicorn answered on June 6, 2021 Popularity 9/10 Helpfulness 8/10

answer how to determin if element is in viewport with jquery

related how to determin if element is in viewport with jquery

how to determin if element is in viewport with jquery

Comment

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

Popularity 9/10 Helpfulness 8/10 Language javascript

Source: stackoverflow.com

Tags: element javascript jquery viewport

Link to this answer
Share Copy Link

Contributed on Jun 06 2021

Ugly Unicorn

0 Answers Avg Quality 2/10

Closely Related Answers

how to determin if element is in viewport with jquery

Comment

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

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: element

Link to this answer
Share Copy Link

Contributed on Jun 06 2021

Ugly Unicorn

0 Answers Avg Quality 2/10

how to determin if element is in viewport with jquery

Contents

More Related Answers

how to determin if element is in viewport with jquery

Closely Related Answers

how to determin if element is in viewport with jquery

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.