Showing a new element when window has scrolled past another element

Question

I seem to be having some problems with my jquery code on getting my cloned navigation to come into view once the user has scrolled past a particular element in the page and then if they scroll back up it animates out again.

The jquery code i've written is:

$(window).scroll(function() {
var homeHeight = $('#header').outerHeight() + $('.homeIntro').outerHeight();
var scrollPosition = $(this).scrollTop(); 
if( homeHeight <= scrollPosition ) {
    $('#clonedHeader').animate({'top': '0'}, 300);      
} else {
    $('#clonedHeader').animate({'top': '-100px'}, 300); 
}

});

Here's a fiddle : http://jsfiddle.net/ABdLh/

So theres a cloned header that slides into view when you scroll past the homeIntro part, well thats the idea that i want, but its not happening for me!

Any help would be much appreciated! thanks!

Answer 1

I overlooked some code previously. By simply adding the .stop()-method you can get it to work:

if(homeHeight <= scrollPosition) {
    $('#clonedHeader').stop().animate({'top': '0'}, 300);      
} else {
    $('#clonedHeader').stop().animate({'top': '-100px'}, 300); 
}

Try it here.