how to determin if element is in viewport with jquery

Solutions on MaxInterview for how to determin if element is in viewport with jquery by the best coders in the world

showing results for - "how to determin if element is in viewport with jquery"
Christiana
02 Jun 2016
1// this function runs every time you are scrolling
2
3$(window).scroll(function() {
4    var top_of_element = $("#element").offset().top;
5    var bottom_of_element = $("#element").offset().top + $("#element").outerHeight();
6    var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
7    var top_of_screen = $(window).scrollTop();
8
9    if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
10        // the element is visible, do something
11    } else {
12        // the element is not visible, do something else
13    }
14});
15
Laura
23 Jan 2017
1$.fn.isInViewport = function() {
2    var elementTop = $(this).offset().top;
3    var elementBottom = elementTop + $(this).outerHeight();
4
5    var viewportTop = $(window).scrollTop();
6    var viewportBottom = viewportTop + $(window).height();
7
8    return elementBottom > viewportTop && elementTop < viewportBottom;
9};
10