139

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 );
1

5 Answers 5

167

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.

9
  • 2
    If checking within a div (not the window) then remember to subtract the parent divs offset.
    – Karlth
    Feb 26, 2017 at 16:42
  • you would subtract offset like this if your button is on top and element appears on the bottom: return ( elementBottom > viewportTop ) && ( elementTop < viewportBottom - $( this ).height() ); Jul 29, 2017 at 10:31
  • 2
    Thanks! I made a more complete plugin using your code as base: github.com/frontid/jQueryIsInViewport
    – Capy
    Aug 14, 2017 at 16:59
  • $(window).height() doesn't factor in a mobile device's zoom (at least when using jQuery v1.9). A better solution is to use window.innerHeight, which does change when pinching the screen to zoom in on a mobile device.
    – Steven
    Apr 11, 2018 at 20:14
  • btw this doesn't work if you are using Chrome debugger in mobile mode and click on the page and scroll. Only works if I use the trackwheel to scroll up and down. Unless I am missing something
    – Si8
    Aug 22, 2018 at 13:21
134

Check if element is visible in viewport using jquery:

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 also used an answer to the following question to formulate my answer: Show Div when scroll position.

11
  • I think it should be $("#element").outerHeight();
    – standac
    Apr 10, 2016 at 18:42
  • 4
    little correction; like @boblapointe points out: it should be outerheight(), and a dot ('.') is missing between offset()top
    – Maurice
    Jun 10, 2016 at 10:25
  • 3
    Without plugin?! what about: $(window).scroll?? Oct 13, 2016 at 14:34
  • Are you referring to jquery?
    – Whip
    Dec 7, 2016 at 10:41
  • A previous version of this answer may also be helpful if you want to detect when an element first enters view/is fully in view, and then when it begins to leave view (when the top of the next element is visible).
    – ADB
    May 20, 2017 at 0:01
66

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
}
9
  • 14
    you should remove the (true) in visible()
    – slvnperron
    Dec 26, 2013 at 21:24
  • 1
    @slvnperron: Why? It's a valid use of the plugin, and corresponds to the original code posted in the question.
    – David
    Dec 26, 2013 at 21:25
  • well he probably want to check for the entire div visibility, the argument is for partial detection
    – slvnperron
    Dec 26, 2013 at 21:32
  • 2
    @slvnperron: True : the entire element is visible, false : part of the element is visible Dec 26, 2013 at 21:39
  • 5
    A nice little library. Unfortunately, it's abandoned and no longer works with current versions of jQuery. It throws errors like Uncaught TypeError: r.getClientRects is not a function, which is common of libraries incompatible with jQuery>3.
    – Cerin
    Nov 20, 2020 at 17:41
-2

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.

1
  • 4
    This is not a standard jQuery function ("visible is not a function)
    – cupiqi09
    Jan 20, 2020 at 15:57
-4
var visible = $(".media").visible();
2
  • 1
    I not sure that it's subtle to use class selector .media, because if there many elements which belong to media class ... Dec 26, 2013 at 21:45
  • 3
    This is not a standard jQuery function ("visible is not a function)
    – cupiqi09
    Jan 20, 2020 at 15:57

Not the answer you're looking for? Browse other questions tagged or ask your own question.