I recently had an idea for a webpage, with a background which changes based on how far down the page the viewer has scrolled. The idea was to have the Sun rise from the left side of the page, and then arc up and finally set on right.
As went about creating a page which does this, I ended up creating my jQuery Scroll Tracker. It’s a very simple script, which allows you to track the position, and take certain actions when a certain part of the page is reached.
If you’ve been on the demo page, you’ll have seen that as you start scrolling the instructions disappear. Here’s the code and explanation of how that effect is achieved:
//when the document is loaded
$(document).ready(function(){
scrollTracker.initialize();
/* the 'instructions' parameter is just a label we're giving to the tracker so we can delete it later
/ it's just a label and can be called whatever you want
/ the second parameter is a callback function, which the scrollTracker will fire when the page is scrolled
/ the function can accept two parameters:
/ - scrollpercent - the percentage of the page which has been scrolled
/ - scollpos - the number of pixels of the page which has been scrolled
*/
scrollTracker.addObject('instructions',function(scrollpercent,scrollpos){
//if 10% of the page is scrolled
if(scrollpercent > 10) {
//fade the instructions out
$('#instructions').fadeOut();
//remove the tracker so that it only gets called once
scrollTracker.deleteObject('instructions');
}
});
});
As you can see, most of the code is comments. The scrollTracker listens for when the page is scrolled, and when it is it will call the function you provide it with.
There’s a lot more you can do with it, and you can find full up-to-date documentation on the GitHub project page
If you decide to use it, please let me know so I can link to it as an example.
If you have suggestions or requests then please post in the comments and I’ll see what I can do!
Have fun!
