Dec 23, '09

jQuery Sticky Footer

I hate to re-post, but this is something I constantly use, and I didn't want to lose it, so I'm throwing it in my blog. Thanks to Chris Coyier of CSS-Tricks for this one (you can read the full post and see a demo on his site).

// Window load event used just in case window height is dependant upon images
$(window).bind("load", function() { 

 var footerHeight = 0,
 footerTop = 0,
 $footer = $("#footer");

 positionFooter();

 function positionFooter() {

 footerHeight = $footer.height();
 footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";

 if ( ($(document.body).height()+footerHeight) < $(window).height()) {
 $footer.css({
 position: "absolute"
 }).animate({
 top: footerTop
 })
 } else {
 $footer.css({
 position: "static"
 })
 }

 }

 $(window)
 .scroll(positionFooter)
 .resize(positionFooter)

});

---

Share

---

Comments

What people are saying...