当窗口向下滚动 CSS 时，如何使导航栏不移动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17842114/
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 to make the Navigation bar not move when window scrolled down CSS?
提问by rafacardosoc
On my website, i got the background image to stay always centered and the navigation to always stay on the same spot horizontally, so it does not matter the HORIZONTAL size, it's always on the same spot i did that by using:
在我的网站上，我让背景图像始终居中，导航始终水平保持在同一位置，因此水平尺寸无关紧要，它始终位于我使用的同一位置：
#nav {
list-style: none;
position:fixed;
right:50%;
margin-right:155px;
margin-top:220px;
}
My issue is with the VERTICAL part. When the Window is small vertically and it gets scrolled down, the menu moves with the page, an i don't want that. I wanted to make it stay up there with the logo, but using a percentage for "top" doesn't seem to work. I am not very familiar with javascript so if it could be don with CSS, it would be easier for me to understand!
我的问题是垂直部分。当窗口垂直较小并且向下滚动时，菜单随页面移动，我不希望那样。我想让它和徽标一起留在那里，但使用百分比表示“顶部”似乎不起作用。我对 javascript 不是很熟悉，所以如果它可以与 CSS 一起使用，我会更容易理解！
HEEELP!
嘿嘿！
here is my example!
这是我的例子！
回答by fenix
Change your nav class to:
将您的导航类更改为：
#nav {
list-style: none;
position:absolute;
right:50%;
margin-right:155px;
margin-top:220px;
}
回答by Pevara
Not sure if I understand you correctly, but is this what you are looking for:
不确定我是否正确理解您，但这是否是您要查找的内容：
#nav {
list-style: none;
position:fixed;
left: 0;
top:220px;
}
And your fiddle: http://jsfiddle.net/wQdVv/16/
还有你的小提琴：http: //jsfiddle.net/wQdVv/16/
Do note that position:fixedon mobile is a bad idea, as support is not good and will produce strange/unwanted results. Use staticon mobile in stead (with a media query)
请注意，position:fixed在移动设备上是一个坏主意，因为支持不好并且会产生奇怪/不需要的结果。static改为在移动设备上使用（通过媒体查询）
回答by alireza
it's because
这是因为
position:fixed;
that means you want your nav to move with your screen.
这意味着您希望导航随屏幕移动。
you can read about positions here
but if you want your nav to be beside your logo you should create a div and put both nav and logo in it.
但是如果你想让你的导航在你的标志旁边，你应该创建一个 div 并将导航和标志放在其中。
.header
{
background-color:transparent;/* you can write any color you want but in this way it gets hidden */
text-align:center;
position:relative;
}
#nav
{
position:absolute;
bottom:-15px;
right:42%;
display:inline-block;
}
ul
{
list-style:none;
}<html>
<body>
<div class="header"><!--div that contain both logo and nav-->
<img src="logo.png" alt="logo" /><!--logo image-->
<!--nav codes here-->
<div id="nav">
<ul><li>nav</li></ul>
</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><center><h2><p>As You can see it doesn't move with page scrolling</p></h2></center>
</body>
</html>the code above is a simple example.
上面的代码是一个简单的例子。
回答by Ori Marash
The problem is the
问题是
position: fixed;
in your CSS.
在你的 CSS 中。
fixedmeans stay in this part of the screen, even when scrolling. Change it to:
fixed意味着留在屏幕的这一部分，即使在滚动时。将其更改为：
position: absolute;
and the navbar will stay wherever you position it and won't move, even when scrolling.
并且导航栏将停留在您放置它的任何位置并且不会移动，即使在滚动时也是如此。
You can read more about positioning at W3 Schools
您可以在W3 Schools阅读更多关于定位的信息
