Check Element's Position Relative To The Viewport - jQuery ExopiteInViewPort

Yet another jQuery-powered Is In Viewport plugin that can be used to check the current position of the element relative to the viewport while scrolling down/up the page.

It provides a set of helpful callbacks that will be fired when the target element enters or leaves the viewport, when the entire element is within the viewport, or when part of the element is within/out of the viewport.

Great for image lazy loading, scroll-triggered animations, infinite scrolling, parallax effects, scroll position indicators, DOM visibility toggling, and much more.

How to use it:

1. Download and import the ExopiteInViewPort plugin in your jQuery project.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.exopiteinviewport.js"></script>

2. Select the elements you want to track and call the .exopiteInViewPort() method:

$('.element').exopiteInViewPort({

  // enter the viewport
  // direction = top, bottom
  onEnter: function(element, direction) {
    if ( direction == 'top' ) {
      alert('Element entered from top');
    } else if  ( direction == 'bottom' ) {
      alert('Element entered from bottom');
    }
  },

  // outside the viewport
  // direction = top, bottom
  onLeft: function(element, direction) {
    alert('Element left ' + direction);
  },

  // return true if the whole element is in viewport
  onWholeInside: function(element, inViewport) {
    if (inViewport) {
      alert('The whole element is inside the viewport');
    } else {
      alert('Not the whole element is inside the viewport');
    }
  },

});

3. This plugin provides a throttle option to reduce the frequency of checks, which can help improve your site's performance significantly. Default: 100.

$('.element').exopiteInViewPort({
  throttle: 200,
});

4. Set the offset & paddings of the element. Can be helpful when you have a sticky header/footer nav on the page.

$('.element').exopiteInViewPort({
  offset: 0,
  paddingTop: 0,
  paddingBottom: 0,
});

---

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