Nav Affix background image change

Question

I am using Nav affix to change the background of my nav on scroll. There are two separate nav classes, nav-affix, and nav-affix-top. It seems to be working:

http://[redacted] (please point out bugs) but for some reason, if the page is reloaded, and then there is a mouse click on any of the links or the sliders on the page, the nav will change classes and backgrounds again. Any insight as to why this is hapening is appreciated!

JS:

$(function() {

    $('#nav-wrapper').height($("#nav").height());
    $('#nav').affix({
        offset: { top: $('#nav').offset().top }
    });
});

CSS:

#nav.affix {
    position: fixed;
    overflow:visible;
    width:100%;
    background-image:url(../navbackground2.png);
}

#nav.affix-top {
    background-image:url(../navback1.png);
    margin-top:0;
}

Answer 1

This could be a bug from Bootstrap, please put following code in your javascript file:

$('#nav').on('affix.bs.affix', function() {
    if (!$(window).scrollTop()) return false;
});

This piece of code will check if it is possible to scroll to the top of your page. If this returns false, which means you are on top already, it won't change the affix-top class of your navbar.