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

我想要

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

我发现这个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事件 ，然后确定padding是否应该等于元素的height或删除：

更新示例 – 您看到的跳转不再发生。

 $('#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;