jQuery waypoints
===

I am using jQuery waypoints to change the style of my header when the user begins to scroll down the page. However I am struggling when trying to get the header to return to its natural style when it return to the top of the screen ie: the user scroll back to the top.

    $(document).ready(function(){
           $('.slide-wrap').waypoint(function() {
	           $("#header").animate({backgroundColor: 'black'},2000,function(){
		           bgColor = 'black';
		       }) 
		    });		        
    });

I currently have this so far, which work fine when scrolling down the the page.

Any assistance appreciated.

Many thanks