Categories
javascript

Sticky Footer Bar using jquery when scrolling

The zurb foundation has a sticky top bar. But they don’t have a sticky footer / lower bar. This is an attempt to implement the sticky footer bar similar to that found in cnn.com

Let the footer id be

sticky-footer

. When we scroll up we check for the current position of the scroll of the window and add the sticky css class to the footer. When the scroll reaches the original postion of the footer we restore the original positioning.
The css required for fixed footer is

.fixed_footer{
  position: fixed;
  bottom: 0;
  width: 100%;
}

The javascript that adds and removes the fixed class is

//save the existing postion of the footer
$footer = $('#sticky-footer');
$win = $(window);
var ipos = $footer.offset().top;
var wpos, space;

function h(e){
      wpos = $win.scrollTop();
      space = $win.height() - $footer.height()*2;
      if (wpos + space < ipos) {
          $footer.addClass('fixed_footer');
      } else {
          $footer.removeClass('fixed_footer');
      }
}
// this triggers the repositioning of the bar on all relevant events
$(window).ready(h).resize(h).scroll(h);

JSfiddle demo