Sticky footer with fluid height using jQuery and Cross browser compliant

For many of our website implementation we have required a sticky footer. Having a sticky footer means your footer sticks to the bottom of your browser window if your document (content) is not as height as your browser window.

There's a few options to do this using CSS. But many  assume you know the height (fixed) of your footer. And with a CMS this will vary all the time as we give you the power to do the publishing so CSS wasn't going to cut it, as this might shrink or expand over time and then just not look right with out tweaking for each page, this is far from ideal.

Rather then re-invent the wheel we were able to find a brilliant solution using a powerful jQuery solution. You can see an example of it on many of our implementations but one that comes to mind is this one.

So I guess you want the code right?

This is how you should format your HTML and note the ID’s for your CSS if you wish to apply styles.

<div id="wrapper">
  <div id="header">This is the header.div>
  <p>Some content.p>
  <div id="footer">This is the (sticky) footer.div>
div>

here is the jQuery used for the sticky footer

<script type="text/javascript"> 
      $(document).ready(function() {
        $("#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);
    </script> 

An example of the source code in action can be found here

If your interested in the original post of this blog it can be found here

Tags
Jquery , Javascript , Web Design
Share

Categories

Tags

Archive