How to fix non sticking sticky footer with Jquery.

lakewooditsupport · #1 May 7, 2012, 12:43 PM

I've had this problem with a few versions of Atahualpa now where the footer stops sticking when selected to stick to the bottom of the screen, I'm not sure what the problem was or what if any plugin is conflicting but it seems to be a common problem. I decided to make a fix and it works perfectly on my site across all up to date browsers.

You can use the jquery script below, in the header or include it in your javascript file if you have one.

Code:

$(function(){
	positionFooter(); 
	function positionFooter(){
		var padding_top = $("#footer").css("padding-top").replace("px", "");
		var page_height = $(document.body).height() - padding_top;
		var window_height = $(window).height();
		var difference = window_height - page_height;
		if (difference < 0) 
			difference = 0;
 
		$("#footer").css({
			padding: difference + "px 0 0 0"
		})
	}
 
	$(window)
		.resize(positionFooter)
});

Its essentially the same as the atahualpa script but this works where the default did.