A Simple(r) jQuery Sticky Footer (works with Foundation 5)

• Posted: Sun Aug 16 2015 08:01:16 GMT-0500 (CDT)
• Updated: Tue Aug 25 2015 11:31:51 GMT-0500 (CDT)

Tags:

• tutorial
• jQuery

Update:

If you use this in conjunction with my "Static Site Comments with jQuery and Google Forms/Sheets" solution, I suggest you call this function as a callback to the comment function. At the very least, call this script after any JavaScript which modifies the DOM and the page height. In such a case, you need to make sure the modified element has loaded before calling stickyFooter();, either as a callback to the DOM-/height-modifying script or with

$('SCRIPT-ELEMENT').on('load', function() {
  stickyFooter();
});

replacing "SCRIPT-ELEMENT" with the selector of whatever element the other script adds/modifies.

Background:

A simple snippet of jQuery that makes a footer sticky (sticks to the bottom of the page when thin on content, but goes below the fold when not) with one simple switch of the CSS "position" property.

In my search for a sticky footer compatible with Foundation, I came across many CSS-only solutions that required a set height for the footer (which defeats the purpose of a responsive framework), several which required setting a negative margin equivalent to the footer height on the preceding element (such as main) and an either an empty div with a class of "push" or an :after pseudo-selector for said preceding element with a height equal to that of the footer (again, responsive framework, so no).

Additionally, most of these solutions required setting html and/or body to height:100%, setting main to height:auto and min-height:100%, and setting one or more of these elements to position:relative. Finally, some of them act funny when the footer is set to width:100%, which I need.

I found one jQuery snippet which solved the issue when wrapped in a function and called both on page load and window resize. It worked, and without any of the above CSS modifications (slightly modified below for my markup). One "gotcha" of this is that it must be called before any Foundation scripts.

function stickyFooter() {
var footer = $("footer");
  var pos = footer.position();
  var height = $(window).height();
  height = height - pos.top;
  height = height - footer.height();
  if (height > 0) {
    footer.css({
      'margin-top': height + 'px'
    });
  }
}
$(function () {
  stickyFooter();
});
$(window).on(resize, function() {
  stickyFooter();
});

Done, right? I couldn't help but think that this could be simpler.

My Solution:

All that is really required, in order to make the footer stick to bottom or get pushed (by content length) below the fold, is a switch between footer {position:absolute} for sticky and footer {position:relative} for below the fold. The trigger for this is a simple if/else statement, testing whether the combined height of page elements ("header", "main", and "footer" in my case) is greater than the window's height, fired on page load and window resize:

/** stickyfooter.js */
/** This file simply defines the function. Call the function in the page, or as a callback to the last DOM-manipulating function which affects page height */
/* $(document).ready(function() {
    stickyFooter();
  });
  $(window).on('resize', function() {
    stickyFooter();
}); */
function stickyFooter() {
  if (($('main').height() + $('header').height() + $('footer').height()) > $(window).height()) {
    $('footer').removeClass("sticky-footer");
  } else {
    $('footer').addClass("sticky-footer");
  }
}

With CSS of:

footer {
  position: relative;
  bottom: 0;
  width: 100%;
}

(I know I could replace the .addClass("sticky-footer"), .removeClass("sticky-footer"), and CSS with .css("position", "absolute") and .css("position", "relative"), but I took this approach for better separation of concerns).

Finally, call the function (below your HTML content) on both document ready (see Update above for use with other DOM-modifying scripts) and page resize with:

<script>
$(function() {
  stickyFooter();
});
$(window).on('resize', function() {
  stickyFooter();
});
</script>

An added bonus of my approach is that the script can called anywhere after jQuery is loaded, before or after Foundation.