sticky footer con jQuery

Nos olvidamos de ensuciar el html

by cristian_cena

HTML

<div id="wrapper">
  <div id="header">Esta es la cabecera</div>
  <p>AquĂ­ el contenido</p>
  <div id="footer">Este es el pie pegadizo (sticky footer)</div>
</div>

CSS

body, * {padding: 0; margin: 0; }
#wrapper { width: 960px; margin: 0 auto; }
#header, #footer { background: #ccc; padding: 2em; }

JavaScript

/*
fuente: 
http://www.drupalcoder.com/blog/cross-browser-sticky-footer-with-fluid-height-using-jquery
*/
$(document).ready(function() {
  positionFooter();
   
  $(window)
    .scroll(positionFooter)
    .resize(positionFooter);
   
  function positionFooter() {
    var docHeight = $(document.body).height() - $("#sticky-footer-push").height();
    if(docHeight < $(window).height()){
      var diff = $(window).height() - docHeight;
      if (!$("#sticky-footer-push").length > 0) {
        $("#footer").before('<div id="sticky-footer-push"></div>');
      }
      $("#sticky-footer-push").height(diff);
    }
  }
});



$("#footer").stickyFooter();
 
// sticky footer plugin
(function($){
  var footer;
 
  $.fn.extend({
    stickyFooter: function(options) {
      footer = this;
       
      positionFooter();
 
      $(window)
        .scroll(positionFooter)
        .resize(positionFooter);
 
      function positionFooter() {
        var docHeight = $(document.body).height() - $("#sticky-footer-push").height();
        if(docHeight < $(window).height()){
          var diff = $(window).height() - docHeight;
          if (!$("#sticky-footer-push").length > 0) {
            $(footer).before('<div id="sticky-footer-push"></div>');
          }
          $("#sticky-footer-push").height(diff);
        }
      }
    }
  });
})(jQuery);