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)
});

No comments:

Post a Comment