Check If An Element Is In The Viewport - jQuery isvisible

Just another viewport checker plugin for jQuery that listens for when elements enter/or leave the viewport and sets corresponding CSS classes based on the current scroll position. Supports both vertical and horizontal page scrolling.

How to use it:

1. Load the JavaScript file jquery.isvisible.js after loading jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.isvisible.js"></script>

2. Add the CSS class 'js-is-visible' to the targer element.

<div class="js-is-visible">Element</div>

3. Activate the plugin on the element.

$('.js-is-visible').isVisible();

4. Add CSS classes to the element when it is scrolled into or out of the viewport.

$('.js-is-visible').isVisible({
  showClass: 'active',
  removeClass: 'inactive'
});

5. You can also to specify the offsets in pixels to change the location of the trigger point.

$('.js-is-visible').isVisible({
  offset: 0,
  offsetTop: 0,
  offsetBottom: 0,
  offsetLeft: 0,
  offsetRight: 0,
});

6. More default CSS classes that will be applies to the element based on the scroll position.

$('.js-is-visible').isVisible({
  classXY: 'is-visible',
  classX: 'is-visible-x',
  classY: 'is-visible-y',
  classTop: 'is-visible-top',
  classBottom: 'is-visible-bottom',
  classLeft: 'is-visible-left',
  classRight: 'is-visible-right',
  dataName: 'is-visible-offset',
  dataNameTop: 'is-visible-offset-top',
  dataNameBottom: 'is-visible-offset-bottom',
  dataNameLeft: 'is-visible-offset-left',
  dataNameRight: 'is-visible-offset-right'
});

7. The plugin also provides an event handle that will be triggered when the elements is in the viewport.

$('.js-is-visible').on( 'isVisible', function( event, visiblePart, scrollDirectionY, scrollDirectionX  ) {

  if ( visiblePart == "y") {
    console.log('Vis:' + visiblePart);
    //console.log('Y:' + scrollDirectionY);
    //console.log('X:' + scrollDirectionX);
  }

});

---

This awesome jQuery plugin is developed by fabioquarantini. For more Advanced Usages, please check the demo page or visit the official website.