bootstrap menu top affix

我正在尝试使用图像和菜单链接进行引导菜单，当它滚动时，菜单会粘在窗口的顶部。

我找到了有趣的bootstrap词缀，并使用了这个post中的内容： bootstrap-affix：div下面的词缀“jumps”到顶部。 如何让它顺利滚动？

问题是，当我按下菜单按钮时，选项位于页面的内容文本下。

我写了一个小提琴，让你看到我的问题并尝试解决方案： http ： //jsfiddle.net/mram888/WnPqF/

我试图为菜单div的类添加不同的z-index，但只有在页面滚动并且菜单贴在顶部时才能正常工作。

#nav.affix { position: fixed; top: 0; width: 100%; z-index:2; } #nav > .navbar-inner { border-left: 0; border-right: 0; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; } .nav-wrapper { z-index: 2; } 

Answer 1

您需要将z-index应用于#nav而不是.nav-wrapper：

 #nav { position: relative; z-index: 2; } 

演示： http ： //jsfiddle.net/t7pL3/

Answer 2

你的另一个变种： http ： //jsfiddle.net/panchroma/6P5sF/

这里的行为与以前略有不同。 导航栏在粘贴之前随页面滚动，当打开折叠菜单时，它会向下推送页面内容。

我删除了你的javascript并通过将以下内容添加到nav-wrapper div来使用数据属性调用所有内容：

data-offset-top是在粘贴菜单之前需要滚动的距离。

我还对你的CSS做了一个小改动：

 #nav-wrapper.affix { top: 0; width: 100% } 

希望这可以帮助！

Answer 3

这似乎可以通过替换您提供的CSS来实现

 #nav { width: 100%; position:fixed; } #nav.affix { top: 0; } #nav > .navbar-inner { border-left: 0; border-right: 0; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; } 

主要区别在于， #nav.affix涵盖了#nav.affix和#nav.affix-top两种情况

看到这个jsfiddle 。

编辑：当inheritance #nav的位置时，问题就出现了 。 如果您按照我的建议修复它，或者如果您将其设置为相对 ，正如其他post所建议的那样，您的问题将得到解决。