jQuery Plugin To Determine If An Element Is In the Viewport - Viewport Checker

Yet another jQuery plugin to check and determine if an element is visible within the viewport of the browser and add a class to it (or execute a callback event).

See also:

• jQuery Plugin For Checking If An Element Is In The Viewport - isInViewport

Basic Usage:

1. Create an Html element you wan to check if it's in the viewport.

<div class="demo"></div>

2. Load the jQuery javascript library and jQuery Viewport Checker plugin at the end of your document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="viewportchecker.js"></script>

3. Call the plugin on this element and do something in the javascript.

$(document).ready(function(){
$('.demo').viewportChecker({

// Class to add to the elements when they are visible
classToAdd: 'visible', 

// Class to remove before adding 'classToAdd' to the elements
classToRemove : 'invisible',

// The offset of the elements (let them appear earlier or later)
offset: 100, 

// Add the possibility to remove the class if the elements are not visible
repeat: false,

// Add the offset as a negative number to the element's bottom
invertBottomOffset: true,

// Callback to do after a class was added to an element. 
// Action will return "add" or "remove", depending if the class was added or removed
callbackFunction: function(elem, action){},

// Set to true if your website scrolls horizontal instead of vertical.
scrollHorizontal: false

});
});

Change logs:

2015-12-18

• v1.8.7: bugfix

2015-10-12

• v1.8.5

2015-07-16

• Added check for windows phone

2015-04-25

• Added pointermove and moved mspointermove

2014-11-26

• Added check on resize

2014-11-25

• Fixed data attributes and polished code a bit

2014-10-02

• update.

2014-09-25

• added trigger for inital check if elements already visible

---

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