dynamic-sticky-footer.md

Dynamic Sticky Footer

For when you want a sticky footer, but can't guarantee the height of the footer.

Modified from https://css-tricks.com/snippets/css/sticky-footer/

1. Wrap all elements, minus footer, in .page-wrap

<div class="page-wrap js-page-wrap">
  <!-- your site contents -->
  <div class="footer-spacer js-footer-spacer"></div>
</div>

<footer class="footer js-footer">
  <!-- your footer -->
</footer>

2. Apply non-height specific styles

* {
  margin: 0; /* not necessary if you're using bootstrap/foundation */
}

body,
html {
  height: 100%;
}

.page-wrap {
  min-height: 100%;
}

2b. Optional: minimize jumpy footer initialization

These are the styles that will be applied via JavaScript once the page loads

$footerHeight: 100px;

.page-wrap {
  margin-bottom: -$footerHeight;
}

.footer,
.footer-spacer {
  height: $footerHeight;
}

3. Implement sticky footer

jQuery(document).ready(function ($) {

  /**
   * Size sticky footer
   *
   * @return function (bool?)
   */
  var sizeStickyFooter = (function () {

    var pageWrap = $('.js-page-wrap'),
        footerSpacer = $('.js-footer-spacer'),
        footer = $('.js-footer'),
        animationSpeed = 400;

    return function (animate) {
      var footerHeight = footer.css({height: 'auto'}).outerHeight();
      if (typeof animate !== undefined && animate === false) {
        pageWrap.css({'margin-bottom': -footerHeight + 'px'});
        footerSpacer.css({height: footerHeight + 'px'});
        footer.css({height: footerHeight + 'px'});
      } else {
        pageWrap.animate({'margin-bottom': -footerHeight + 'px'}, animationSpeed);
        footerSpacer.animate({height: footerHeight + 'px'}, animationSpeed);
        footer.animate({height: footerHeight + 'px'}, animationSpeed);
      }
    };

  }());

  // initialize sticky footer; don't animate

  sizeStickyFooter(false);

  // reinitialize on window load and resize, to account for footer height changes

  $(window).load(function () {
    sizeStickyFooter(false);
  }).resize(_.debounce(sizeStickyFooter, 150)); // _.debounce is from lodash

});