Javascript 使用“粘贴”时引导导航栏重叠内容

我想要

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

我发现这个JSFIDLE提供了上述解决方案：

代码的两个要点：

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

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

我现在的问题是当你向下滚动到“粘贴”发生的位置。如果你仔细观察这一点，它会有点跳跃，现在导航栏与段落中的前4行重叠

---

有没有办法消除这种重叠

您需要通过向

主体

元素添加与固定元素高度相等的

padding top

来替换固定的

.navbar

元素

您可以收听，然后确定填充是应等于元素的高度还是应删除：

-您看到的跳跃不再发生

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

将“z-index:10；”添加到css中的topnavbar.affix类

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

---

不起作用。与此填充更加重叠。@Heihachi感谢否决票。你显然做错了！它在示例中起作用，解决了OP的问题。。。你不能只是从别人的问题中复制/粘贴代码，然后期望它完全适合你。这根本无助于解决这个问题。