bootstrap menu top affix

Question

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

我找到了有趣的bootstrap词缀,并使用了这个帖子中的内容: bootstrap-affix:Div下面的词缀"跳转"到顶部.如何让它顺利滚动？

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

我写了一个小提琴,让你看到我的问题并尝试解决方案: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,包装:

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

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

Answer 2

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

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

我删除了你的javascript,并通过将以下内容添加到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%
}

希望这可以帮助!