$(document).ready(function() {
	
	/** Var init **/
	scrollerTopPos = 0;

	/** Distance to Top while element is fixed **/
	TopSpacer = 40;

	/** Distance to clearing element**/
	BottomSpacer = 20;

	$(window).scroll(function() {

		/** Top-Position of the Header **/
		if(scrollerTopPos == 0) {
		scrollerTopPos = $('.scroller').offset().top;
		}
		
		/** Here it changes from absolute to fixed and back **/
		var changePos = (scrollerTopPos - TopSpacer);
		
		/** Top-Position of clearing element (Footer) **/
		var footerTop = $('#footer').offset().top;
		
		/**  Where to get element back into absolute position **/		
		var scrollerHight = $(".scroller").attr("scrollHeight");
		
		var maxTopDistance = (footerTop - scrollerHight - BottomSpacer - TopSpacer);
		var AbsolutemaxTopDistance = maxTopDistance + TopSpacer;
		
		
			if( window.XMLHttpRequest ) { // IE 6 doesn't implement position fixed nicely...
	
				if (document.documentElement.scrollTop > maxTopDistance || self.pageYOffset > maxTopDistance) {
					$('.scroller').css('position', 'absolute');
					$('.scroller').css('top', AbsolutemaxTopDistance+'px');
				/*	$('.scroller').css('background', 'yellow'); */
				} else {
				
					if (document.documentElement.scrollTop > changePos || self.pageYOffset > changePos) {
						$('.scroller').css('position', 'fixed');
						$('.scroller').css('top', TopSpacer+'px');
					/*	$('.scroller').css('background', 'aqua'); */
					} else if (document.documentElement.scrollTop < changePos || self.pageYOffset < changePos) {
						$('.scroller').css('position', 'absolute');
						$('.scroller').css('top', scrollerTopPos+'px');
					/*	$('.scroller').css('background', 'blue'); */
					}	
				
				}
			
			}	
	});

});