Html 如何在滚动时将菜单栏固定在顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8449272/
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
How can I make a menubar fixed on the top while scrolling
提问by Jensen
I'd like to make a menubar, which is fixed on the top of the page while scrolling. Something like the top menu in Facebook.
我想做一个菜单栏，它在滚动时固定在页面的顶部。类似于 Facebook 中的顶部菜单。
Also, I want a div holding the logo float at the left of menubar, and a nav float at the right of the menubar.
另外，我想要一个 div 在菜单栏的左侧保持标志浮动，在菜单栏的右侧有一个导航浮动。
回答by Dominic Green
This should get you started
这应该让你开始
<div class="menuBar">
<img class="logo" src="logo.jpg"/>
<div class="nav">
<ul>
<li>Menu1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</div>
body{
margin-top:50px;}
.menuBar{
width:100%;
height:50px;
display:block;
position:absolute;
top:0;
left:0;
}
.logo{
float:left;
}
.nav{
float:right;
margin-right:10px;}
.nav ul li{
list-style:none;
float:left;
}
回答by demas
#header {
top:0;
width:100%;
position:fixed;
background-color:#FFF;
}
#content {
position:static;
margin-top:100px;
}
回答by holographix
to set a div at position fixed you can use
在固定位置设置一个div，你可以使用
position:fixed
top:0;
left:0;
width:100%;
height:50px; /* change me */
回答by Migisha
The postition:absolute;tag positions the element relative to it's immediate parent.
I noticed that even in the examples, there isn't room for scrolling, and when i tried it out, it didn't work.
Therefore, to pull off the facebook floating menu, the position:fixed;tag should be used instead. It displaces/keeps the element at the given/specified location, and the rest of the page can scroll smoothly - even with the responsive ones.
该postition:absolute;标签位置相对于它的直接父元素。我注意到即使在示例中，也没有滚动的空间，当我尝试时，它不起作用。因此，要取消 facebook 浮动菜单，position:fixed;应该使用标签。它将元素替换/保留在给定/指定的位置，页面的其余部分可以平滑滚动 - 即使是响应式的。
Please see CSS postion attribute documentationwhen you can :)
请尽可能查看CSS 位置属性文档:)
