Showing posts with label jquery sticky footer. Show all posts
Showing posts with label jquery sticky footer. Show all posts

Thursday, October 7, 2010

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.

$(function(){
positionFooter();
function positionFooter(){
if($(document.body).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)
});