jQuery jQuery sticky footer

This will make an element with id footer stick to the bottom of the window, but only if the document body height is less than the window height. If it isn't it 'll just follow the normal document flow.

If instead you want to make the footer always stick to the bottom of the window (comparable to css statement 'position:fixed; bottom:0' ) use the second example.

No margin,border or padding should be set on the element, only on its children if need be, for this to work properly:

$(function(){
	positionFooter(); 
	function positionFooter(){
		if($(document).height() < $(window).height()){
			$("#pageFooterOuter").css({position: "absolute",top:($(window).scrollTop()+$(window).height()-$("#pageFooterOuter").height())+"px"})
		}	
	}
 
	$(window)
		.scroll(positionFooter)
		.resize(positionFooter)
});

Without the body height conditional the footer will always stick to the bottom of the window, regardless of the body height:

$(function(){
	positionFooter(); 
	function positionFooter(){
		$("#pageFooterOuter").css({position: "absolute",top:($(window).scrollTop()+$(window).height()-$("#pageFooterOuter").height())+"px"})	
	}
 
	$(window)
		.scroll(positionFooter)
		.resize(positionFooter)
});