Animated Header in jQuery

I found this cool jQuery script for animating a header: http://www.devirtuoso.com/2009/07/how-to-build-an-animated-header-in-jquery. However I would like to change it a bit, but unfortunately my scripting skills are limited.

What I want to do is: When the animation has reached the end of the image, I want it to scroll back up again, and not start over like in the tutorial. So, basically the image will move up and down continuously.

Anyone knows how that would look lik开发者_运维百科e, script wise?

Regards

Try changing the scrollBg() function to this:

function scrollBg(){

//Go to next pixel row.
current -= step;

//If at the end of the image, then go to the top.
if (current == restartPosition){
    step = -1;
} else if (current == 0) {
    step = 1;
}

//Set the CSS of the header.
$('#header').css("background-position","0 "+current+"px");
}

Here's a very basic working example (just for demonstration purposes - use the code above): http://jsfiddle.net/lukemartin/u2XJ8/

All it does is switch the step value when it gets to either end of the cycle.