Trigger Events On Enter/Exit/Active/Inactive - waypoint.js

waypoint.js is a small JQuery plugin that provides 4 convenient event handlers which will be fired when an element enters/exits the current viewport.

How to use it:

1. Insert the minified version of the waypoint.js library after loading jQuery.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.waypoint.js"></script>

2. Attach the function to the element you'd like to track the scroll position when you scroll down/up the webpage.

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

$(function(){
  $('.box').waypoint();
});

3. Do some cool stuffs when the box element is scrolled into and/or out of the screen.

$('.box').waypoint({
  onEnter: function () {
    alert('enter!');
  },

  onExit: function () {
    alert('exit!');
  },

  onActive: function () {
    alert('active!');
  },

  onDeactive: function () {
    alert('deactive!');
  }
});

4. Specify an offset to determine where to trigger the events. Defaults to 0.

$('.box').waypoint({
  offset: 50
});

5. Decide whether to trigger only once. Defaults to false.

$('.box').waypoint({
  once: true
});

---

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