A jQuery plugin to define a scroll positions and get event on scroll over it.
var scrollOver = $.scrollOver();
To defining a scroll positions, you can set it om the object creation:
var scrollOver = $.scrollOver({
handlers: {
"top-2000": 2000,
"top-400": 400
}
});
or later:
scrollOver.addOptions({sometrigger: 2500});
In this examples, the event will be triggered (see below) each time the page scroll through offset
.
Each time the window scroll position reach a defined positions, the events will be triggered.
4 kind of events are triggered :
scrollover:down
When the scroll position enter move down through the scroll position.scrollover:up
When the scroll position enter move up through the scroll position.scrollover:over
Each time you scroll over the scroll position.scrollover:over:sometrigger
Each time you scroll over the scroll position for specific id.
You can use those events as usual :
$(document).on("scrollover:down", function(event) {
console.log('scrolled over down', event.id);
});
$(document).on("scrollover:up", function(event) {
console.log('scrolled over up', event.id);
});
$(document).on("scrollover:over", function(event) {
if ( event.up ) {
console.log('scrolled over up', event.id);
} else if ( event.down ) {
console.log('scrolled over down', event.id);
}
});
$(document).on("scrollover:over:sometrigger", function(event) {
console.log('scrolled:over:sometrigger', event);
});
It is possible to disable events:
scrollOver.disable();
And re-enable:
scrollOver.enable();
Default settings is:
$.scrollOver({
throttle: 200,
debug: false,
wait_for_tick: false,
touchmove: false
});
- throttle - throttle, 0 for disable
- debug - debug mode
- wait_for_tick - wait for the first tick
- touchmove - listen
touchmove
event for mobile devices
You can find some example implementations in the examples/
directory.