当窗口向下滚动CSS时，如何使导航栏不移动？ [英] How to make the Navigation bar not move when window scrolled down CSS?
问题描述
在我的网站上，我得到的背景图片保持始终居中，导航始终保持在同一水平位置，所以它不要紧，HORIZONTAL大小，它总是在同一个地方，我使用： / p>
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;
}
我的问题是VERTICAL部分。当窗口垂直小，它向下滚动，菜单随着页面移动，我不想要的。我想让它留在那里与标志，但使用百分比顶似乎不工作。
我对javascript不是很熟悉，所以如果它可以用CSS，它会更容易我理解！
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!
HEEELP！
这里是我的例子。
推荐答案
p>
it's because
position:fixed;
这意味着您希望导航随屏幕移动。
that means you want your nav to move with your screen.
但是如果你想要你的导航在你的标志旁边，你应该创建一个div，并在其中放置nav和logo。
but if you want your nav to be beside your logo you should create a div and put both nav and logo in it.
.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.
这篇关于当窗口向下滚动CSS时，如何使导航栏不移动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
