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)
});
Reply:
 
 
 
 
Problem with IE9
Please change this:
$(messageHolder).css('bottom', 0);
To:
$(messageHolder).css({position:'absolute',bottom:0});
Excellent solution, exactly that I need.
Most of sticked footer solutions based on css layout, but it not always possible.
So Thank you again, it save my time.
what if there's hidden contents in dynamic accordion or tabs?
position absolute goes wrong when the contents show up and the page is not refreshed.
Please remove the apostrophe in "...only on it's children if need be...". You want the possessive version of the word, which is "its". Using an apostrophe means it's a contraction and short for "it is" or "it has".
Brilliant, thanks !
What about something like that ? (image that footer is 60 pixel Height and I want 20px margin);
Now the footer clean move from fixed to relative and everything is more mac website style (the shopping cart on the left on the custom configuration).

jQuery(function(){
var $ = jQuery;
positionFooter();
function positionFooter(){
var winH = $(window).height();
var docH = $(document).height();
if( docH <= winH ) {
$('#content').css('margin-bottom','80px');
$("#footer").css({'position': "fixed",'bottom':'0'})
} else {
$('#content').css('margin-bottom','20px')
$("#footer").css({'position': "relative"})
}
}

jQuery(window)
.resize(positionFooter)
});
On my site it worked well on IE8, FF3.6, Opera10, but wrong way on IE6,7. So I think i'd have to refuse from this version of sticky footer
Manage to fix the problem in old IE versions. Sorry for my previos post
How do you fix problem with IE?
Where to place this code?
wow.. thanks for this.
This is very jerky. What's wrong with simple CSS: position:fixed; bottom:0; ?
IE6 sadly doesn't support position:fixed. Also this doesn't adjust to the total document height. Read the first paragraph.
Can anyone show me the demo link?
Change this:
$("#pageFooterOuter").css({position: "absolute",top:($(window).scrollTop()+$(window).height()-$("#pageFooterOuter").height())+"px"})

To:
$('#pageFooterOuter').css({position:'absolute',bottom:0})
CJ - what's point of that? - doesn't deal with difference between window and document height. Also if you gonna do that you might as well just use css statement and no javascript.
position:absolute is fine if the window contents are not bigger than the window, but position:fixed is required otherwise.
great tutorial, have you gotten this to work with the jquery animate function for smoother scrolling up and down?
rendered @ Wed Mar 26 15:47:39 CET 2014