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

jQuery Plugin To Determine If An Element Is In the Viewport - Viewport Checker
File Size: 12.7 KB
Views Total: 12748
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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

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.