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

Question

我想要

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

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

代码的两个要点：

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

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

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

任何想法如何摆脱这种重叠？

Answer 1

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

你可以听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;