trigger events waypoint - Free Download Trigger Events On Enter/Exit/Active/Inactive - waypoint.js

Free Download Trigger Events On Enter/Exit/Active/Inactive – waypoint.js

By Posted on

This time I will share jQuery Plugin and tutorial about Trigger Events On Enter/Exit/Active/Inactive – waypoint.js, hope it will help you in programming stack.

trigger events waypoint - Free Download Trigger Events On Enter/Exit/Active/Inactive - waypoint.js
File Size: 11.7 KB
Views Total: 737
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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.

view source
1 <script src="/path/to/jquery.min.js"></script>
2 <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.

view source
1 <div class="box"></div>
view source
1 $(function(){
2   $('.box').waypoint();
3 });

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

view source
01 $('.box').waypoint({
02   onEnter: function () {
03     alert('enter!');
04   },
05  
06   onExit: function () {
07     alert('exit!');
08   },
09  
10   onActive: function () {
11     alert('active!');
12   },
13  
14   onDeactive: function () {
15     alert('deactive!');
16   }
17 });

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

view source
1 $('.box').waypoint({
2   offset: 50
3 });

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

view source
1 $('.box').waypoint({
2   once: true
3 });

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

source : jquery.net

Related posts: