jQuery Plugin To Detect If Elements Are In View - Viewport Detector

A simple jQuery based viewport detect which performs a callback and alters the CSS classes if a specified elements is scrolled into view.

How to use it:

1. Load the jquery-viewport-detector.js script after jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery-viewport-detector.js"></script>

2. Execute a callback if the #el element is visible on your page.

$('#el').viewportDetector({
  callback: {
    // do something
  }
});

3. Change the CSS styles of the #el element if it is scrolled into view.

#el.active-card {
  background: #00B200;
}

4. Full plugin options.

// jQuery selector
selector: 'li',

// sensitivity
sensitivity: 0.2,

// CSS class added to the active element
activeClass: 'active-card',

// callback
callback: {
  cardChange: null
}

---

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