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

File Size: 11.7 KB
Views Total: 1649
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>

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

  onEnter: function () {

  onExit: function () {

  onActive: function () {

  onDeactive: function () {

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

  offset: 50

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

  once: true

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