kotarok
1/16/2011 - 12:22 PM

Make footer stick to the bottom edge. Cares not to overlap upper content. Make sure that base ancestor element's position is 'relative.' I

Make footer stick to the bottom edge. Cares not to overlap upper content. Make sure that base ancestor element's position is 'relative.' I believe that mostly its 'body' element.

jquery.stickyfooter.js
content_copyfile_download
/*!
 * jquery.stickyfooter.js
 *
 * Copyright 2011, Kotaro Kokubo
 * kotaro@nodot.jp
 * Dual licensed under the MIT or GPL Version 2 licenses.
 */

// In jQuery1.4.4, .outerHeight() or .height doesn't work collecly sometimes.
$.fn.stickyfooter = function(){
  this.each(function(){
    var elem = $(this);

    var positionFooter = function(){

      var footerHeight = elem.outerHeight(),
        contentHeight = 0,
        footerTop = 0;

      if(elem.css('position') == 'absolute'){
        contentHeight = $(document.body).height()+footerHeight;
      }else{
        contentHeight = $(document.body).height();
      }
      footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
      if (contentHeight < $(window).height()) {
        elem.css({
          position: "absolute",
          top: footerTop
          //bottom: 0
        });
      } else {
        elem.css({
          position: "static"
        });
      }
    };

    $(positionFooter);

    $(window)
      .load(positionFooter)
      .scroll(positionFooter)
      .resize(positionFooter);
  
  });
  return this;
};