如何使导航栏在窗口向下滚动CSS时不移动？
如何使导航栏在窗口向下滚动CSS时不移动？
提问于 2013-07-25 02:33:45
在我的网站上，我让背景图片始终居中，导航总是水平地停留在同一地点，所以水平大小并不重要，它总是在我通过以下方式做到的同一地点：
#nav {
list-style: none;
position:fixed;
right:50%;
margin-right:155px;
margin-top:220px;
}我的问题是垂直部分。当窗口在垂直方向上很小并且向下滚动时，菜单会随着页面移动，这是我不想要的。我想让它留在那里的标志，但使用百分比的“顶部”似乎不起作用。我对javascript不是很熟悉，所以如果它能和CSS一起使用，我会更容易理解！
嘿！
这里是我的例子！
回答 4
Stack Overflow用户
发布于 2013-07-25 03:09:04
将您的导航类更改为：
#nav {
list-style: none;
position:absolute;
right:50%;
margin-right:155px;
margin-top:220px;
}Stack Overflow用户
发布于 2013-07-25 03:44:51
不知道我是否理解正确，但这是你要找的东西吗：
#nav {
list-style: none;
position:fixed;
left: 0;
top:220px;
}你的小提琴：http://jsfiddle.net/wQdVv/16/
请注意，在移动设备上使用position:fixed不是一个好主意，因为支持不是很好，而且会产生奇怪的/不想要的结果。在移动设备上使用static (带媒体查询)
Stack Overflow用户
发布于 2016-05-23 13:24:16
这是因为
position:fixed;这意味着你想让你的导航和你的屏幕一起移动。
you can read about positions here
但是如果你想让你的导航在你的徽标旁边，你应该创建一个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>
上面的代码是一个简单的例子。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17842114
复制相关文章
相似问题