引导菜单顶部词缀

Question

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

我发现了有趣的引导词缀并使用了这个线程中的内容： 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，您的问题将得到解决。