jquery - 导航附加背景图像更改

Question

我正在使用导航词缀来更改滚动导航的背景。有两个独立的导航类，nav-affix 和 nav-affix-top。它似乎在工作:

http://[redacted] (请指出错误)但出于某种原因，如果重新加载页面，然后鼠标单击页面上的任何链接或 slider ，导航将再次更改类和背景。感谢任何关于为什么会发生这种情况的见解!

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

这可能是 Bootstrap 的错误，请在您的 javascript 文件中添加以下代码:

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

这段代码将检查是否可以滚动到页面顶部。如果这返回 false，这意味着您已经在顶部，它不会更改导航栏的 affix-top 类。