I need help with making a navigation bar stick to the bottom of the viewport without overlapping the fixed-height sticky footer.
Here is the basic markup for reference:
<div id="wrap">
<div id="main"></div>
</div>
<div id="footer"></div>
<div id="command-bar"></div>
The CSS code can be found on cssstickyfooter.com.
You can view an example at http://jsfiddle.net/z2C5S/2/.
Latest Update
I am making progress with the JavaScript code, but there is still some slight overlap issue when scrolling back up very slowly (http://jsfiddle.net/z2C5S/16)
$(function () {
var setCommandBarPosition = function () {
var footerOffset = $("#footer").offset().top;
var scrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
var weOverlappedFooter = ((windowHeight + scrollTop) >= (footerOffset + 40)); // + the height of the command bar
$("p").html("Overlapped: " + weOverlappedFooter);
if (weOverlappedFooter) {
$("#command-bar").removeClass("affix-bottom");
} else {
$("#command-bar").addClass("affix-bottom");
}
};
$(window).scroll(function () {
setCommandBarPosition();
});
setCommandBarPosition();
});