Search code examples
javascriptjqueryvisible

Jquery check if element is visible in viewport


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

Solution

  • 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
    }