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);