Execute Functions When Elements Entering Or Leaving The Viewport - IsInViewport

Yet another 'Is In Viewport' jQuery plugin that determines if an element is visible and triggers functions when the element enters and leaves the viewport.

Installation:

# Yarn
$ yarn add jquery-is-in-viewport

# NPM
$ npm install jquery-is-in-viewport --save

# Bower
$ bower install jquery-is-in-viewport --save

How to use it:

1. Import the jquery-is-in-viewport into your project or include the JavaScript file isInViewport.jquery.js directly.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="isInViewport.jquery.js"></script>

2. Execute a callback function when a specific element is scrolled into view.

<div class="box">
  Content here
</div>

$(function(){

  $('.box').isInViewport(function (status) {
    if (status === 'entered') {
      alert('Entered');
    }
  })

});

3. Execute a callback function when a specific element is scrolled out of view.

<div class="box">
  Content here
</div>

$(function(){

  $('.box').isInViewport(function (status) {
    if (status === 'leaved') {
      alert('Leaved');
    }
  })

});

---

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