On an app I am building now, I would like to have two navigation bars, I’ll call them the “main nav” and “secondary nav”. I will be using the BootMenu widget from the bootstrap extension.
Main nav will be fixed, full-width at the top of the page. Secondary nav will be page-width, just below the header div.
I would like the position of the secondary nav to be static until the user scrolls down. When the user scrolls to the point where the main nav "hits" the secondary nav as it moves down the page, the secondary nav should also begin moving down to stay on-page, resulting in the main nav being stacked on top of the secondary nav until the user scrolls up far enough to bring the header back into view.
When I scroll down, the navbar moves the way I’d like it do, except it changes size. For some reason it shrinks width when the CSS class “.sticky” is added and it switches from “relative” to “fixed”. So, at this point it seems like a CSS issue. Any tips for working this out?
Here is what I did:
Put this code in /js/floating-nav.js
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top)
$('#secondary-nav').addClass('sticky')
else
$('#secondary-nav').removeClass('sticky');
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});