bootstrap menu top affix

Question

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

我找到了有趣的bootstrap词缀，并使用了这个帖子中的内容： bootstrap-affix : Div underneath affix "jumps" to top. How do I make it smoothly scroll behind?

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

我写了一个小提琴，让你看到我的问题并尝试解决方案： 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并使用data attributes调用了所有内容，方法是将以下内容添加到您的nav-wrapper div中：

<div id="nav-wrapper" data-spy="affix" data-offset-top="100">  

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涵盖了案例#nav.affix和#nav.affix-top

请参阅this jsfiddle。

编辑： 当#nav的位置继承时，问题就出现了。如果您按照我的建议修复，或者如果您将其设置为 relative ，则正如其他帖子建议的那样，您的问题将会得到解决。