Element Visibility Monitor In jQuery - vslide.js

vslide.js is a cross-browser, jQuery based visibility monitor that can be used to detect if an element is visible in the viewport and trigger functions when the element is scrolled in or out of view.

See Also:

• 10 Best Scroll-triggered Animation Plugins With JavaScript

How to use it:

1. Insert the vslide.js script into the webpage which has jQuery library loaded.

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

2. Attach the function VisibilityMonitor to the target.

<div id="triggerdiv">
  Element
</div>

VisibilityMonitor(
  document.getElementById('triggerdiv')
);

3. Once you have implemented the Visibility Monitor on the element, the next step is to determine the callback functions to be triggered as the element is scrolled in or outside of view.

VisibilityMonitor(
  document.getElementById('triggerdiv'),
  function() {
    // element is visible
  function() {
    // element is scrolled out of view
  }
);

---

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