使用词缀时，Bootstrap导航栏重叠内容

Question

我想要

• 带有导航栏的网站横幅
• 向下滚动时横幅消失，但导航栏向下消失 保持不变

我发现这个jsfiddle提供了上述解决方案： http://jsfiddle.net/DTcHh/541/

两个主要代码点：

//js
$('#topnavbar').affix({
    offset: {
        top: $('#banner').height()
    }   
});

//css
#topnavbar.affix {
    position: fixed;
    top: 0;
    width: 100%;
}

我现在的问题是，当你向下滚动到“＆＃39;词缀”的位置时。发生。如果你仔细观察它有点跳跃，现在导航栏与段落中的前4行重叠

任何想法如何摆脱重叠？

Answer 1

您需要通过将.navbar添加到等于固定元素高度的padding-top元素来替换固定的body元素。

您可以收听affix.bs.affix/affix-top.bs.affix events，然后确定padding是否应该与元素的height相同或已删除：

Updated Example - 你看到的跳跃不再发生。

$('#topnavbar').on('affix.bs.affix affix-top.bs.affix', function (e) {
    var padding = e.type === 'affix' ? $(this).height() : '';
    $('body').css('padding-top', padding);
});

Answer 2

将“ z-index：10; ”添加到css中的topnavbar.affix类。

position: fixed;
top: 0;
width: 100%;
z-index:10;