README
jQuery scrollPoint
A jQuery plugin to define and interact with scroll zones.
Defining a scroll zone
To bind an element with a scroll zone, you can use the up
and down
parameters :
jQuery('#foo').scrollPoint({
up : 200,
down : 400
});
In this example, the #foo element will trigger events (see below) each time the page scroll will reach the "up" and "down" limits previously defined.
The following scroll zone definition are equivalent :
jQuery('#foo').scrollPoint();
jQuery('#foo').scrollPoint({
up : jQuery('#foo').offset().top,
down : jQuery('#foo').offset().top + jQuery('#foo').height()
});
It's possible to shift an implicit scroll zone by using the offsetUp
and offsetDown
parameters :
jQuery('#foo').scrollPoint({
offsetUp : $(window).height() / 3,
offsetDown : $(window).height() / 3
});
Without those parameters, the Enter and Leave events will be triggered when the top and the bottom of the element will reach the top of the viewport. With those two parameters, the two events will be triggered when the top and the bottom of the elements will reach the first top third of the viewport.
Using events
Each time the window scroll position reach or leave a defined scroll zone, all the elements bind to this zone will trigger events.
3 kind of events are triggered :
scrollPointEnter
When the scroll position enter the defined scroll zone.scrollPointLeave
When the scroll position leave the defined scroll zone.scrollPointMove
Each time you scroll to say if the scroll position is in or out the scroll zone.
You can use those events as usual :
jQuery(document).on("scrollPointEnter", "#foo", function(event) {
/* Do whatever you want when reaching the scroll zone watches by #foo */
});
jQuery(document).on("scrollPointLeave", "#foo", function(event) {
/* Do whatever you want when leaving the scroll zone watches by #foo */
});
jQuery(document).on("scrollPointMove", "#foo", function(event) {
if (event.isIn) {
/* Do whatever you want while you scroll inside the scroll zone watches by #foo */
} else {
/* Do whatever you want while you scroll outside the scroll zone watches by #foo */
}
});