twitter-bootstrap 引导菜单顶部词缀
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14357576/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap menu top affix
提问by mram888
I'm trying to do a bootstrap menu with an image and under the menu links, that when it's scrolled the menu sticks on the top of the window.
我正在尝试使用图像和菜单链接下的引导菜单，当它滚动时，菜单会固定在窗口的顶部。
I've found interesting bootstrap affix and have used what's in this thread: bootstrap-affix : Div underneath affix "jumps" to top. How do I make it smoothly scroll behind?
我发现了有趣的 bootstrap 词缀并使用了这个线程中的内容： bootstrap-affix : 词缀下方的 Div “跳转”到顶部。如何让它平滑地向后滚动？
The problem is that when I press the menu's button the options are under the content text of the page.
问题是，当我按下菜单按钮时，选项位于页面的内容文本下方。
I've written a fiddle for you to see my problem and try a solution: http://jsfiddle.net/mram888/WnPqF/
我已经为您编写了一个小提琴来查看我的问题并尝试解决方案：http: //jsfiddle.net/mram888/WnPqF/
I've tried to put different z-index for the class of my menu divs, but only works properly when the page is scrolled and the menu is affixed on the top.
我试图为我的菜单 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;
}
采纳答案by Dean
You need to apply the z-indexto the #navnot the .nav-wrapper:
你需要应用z-index到#nav不.nav，包装：
#nav {
position: relative;
z-index: 2;
}
回答by David Taiaroa
Another variation for you: http://jsfiddle.net/panchroma/6P5sF/
你的另一个变化：http: //jsfiddle.net/panchroma/6P5sF/
The behaviour here is slightly different than before. The navbar scrolls with the page before it is affixed, and when the collapsed menu is opened it pushes down the page content.
这里的行为与以前略有不同。导航栏在粘贴之前随页面滚动，当打开折叠菜单时，它会向下推页面内容。
I removed your javascript and called everything using data attributesby adding the following to your nav-wrapper div:
我删除了您的 javascript 并通过将以下内容添加到您的导航包装器 div 中使用数据属性调用了所有内容：
<div id="nav-wrapper" data-spy="affix" data-offset-top="100">
data-offset-top is the distance you need to scroll before the menu is affixed.
data-offset-top 是在粘贴菜单之前需要滚动的距离。
I also made one small change to your CSS:
我还对你的 CSS 做了一个小改动：
#nav-wrapper.affix {
top: 0;
width: 100%
}
Hope this helps!
希望这可以帮助！
回答by Teisman
It seems this can be achieved by replacing the CSS you provided by
看来这可以通过替换您提供的 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;
}
The main difference is that here, #navcovers both the cases #nav.affixand #nav.affix-top
主要区别在于，在这里，#nav涵盖了案例#nav.affix和#nav.affix-top
See this jsfiddle.
看到这个 jsfiddle。
edit:
The problem turns out to occur when #nav's position is inherited. If you fixit, as I suggested, or if you set it to relative, as the other post suggested, your problem will be solved.
编辑：当#nav的位置被继承时，问题就会出现。如果你按照我的建议修复它，或者如果你按照另一篇文章的建议将它设置为relative，你的问题将得到解决。
