Skip to content

Instantly share code, notes, and snippets.

@wemakeweb
Created October 25, 2012 20:52
Show Gist options
  • Select an option

  • Save wemakeweb/3955316 to your computer and use it in GitHub Desktop.

Select an option

Save wemakeweb/3955316 to your computer and use it in GitHub Desktop.
Scrollwatcher - simple waypoint -requires jQuery and mousewheel plugin
function ScrollWatcher(){
this.watchers = [];
this.lastY = 0;
this.first = true;
var scroll = function(event){
var y = window.pageYOffset,
self = this,
diff = y - this.lastY,
dir = diff >= 0 ? 'down' : 'up';
this.lastY = y;
$.each(this.watchers, function(i, watcher){
if(watcher.y < y ){
if(watcher.called < watcher.ticks ){
/*
if its the first scroll an we are allready over the watchers y
we call each fn
*/
if(self.first){
$.each(watcher.fns, function(i, fn){
fn.call(self, event, y, dir);
});
watcher.called = watcher.ticks;
return;
};
var fn = watcher.fns[watcher.called];
if(fn){
fn.call(self, event, y, dir);
}
watcher.called++;
event && event.preventDefault();
}
}
});
if(this.first){
this.first = false;
}
};
$(document.body).on("mousewheel", $.proxy(scroll, this));
};
ScrollWatcher.prototype = {
constructor : ScrollWatcher,
waypoint : function(start, ticks, fns){
this.watchers.push({
y : start,
ticks : ticks,
called : 0,
fns: fns
});
}
};
var watcher = new Scrollwatcher();
watcher.waypoint(200, 8, {
6 : function(){
$('[data-waypoint="4"]').addClass("active");
},
4 : function(){
$('[data-waypoint="3"]').addClass("active");
},
2 : function(){
$('[data-waypoint="2"]').addClass("active");
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment