窗口向下滚动CSS时如何使导航栏不移动？答案

【问题标题】：How to make the Navigation bar not move when window scrolled down CSS?窗口向下滚动CSS时如何使导航栏不移动？
【发布时间】：2013-07-24 09:46:29
【问题描述】：

在我的网站上，我让背景图像始终居中，导航始终水平保持在同一个位置，因此水平尺寸无关紧要，它始终在同一个位置，我通过使用：

#nav {
    list-style: none;
    position:fixed;
    right:50%;
    margin-right:155px;
    margin-top:220px;
 }

我的问题在于 VERTICAL 部分。当窗口垂直较小并且向下滚动时，菜单会随页面移动，我不希望这样。我想让它与徽标一起停留在那里，但使用“顶部”的百分比似乎不起作用。我对javascript不是很熟悉，所以如果可以使用CSS，我会更容易理解！

HEEELP！

这是我的例子！

jsfiddle.net

【问题讨论】：

看看这是不是你想要的：将#nav中的right字段更改为auto。
@PiLHA：正确的位置很好，我想改变的是顶部/底部位置。我不希望它随着页面滚动！
我在示例中看不到任何内容，是我的问题吗？ ...无论如何我认为你需要使用'位置：相对;'接下来通过顶部和右侧/左侧参数放置您的 div ... 别的，我看到一个小 Jquery 制作悬停样式，最好使用 #nav:hover。
找到答案了！ stackoverflow.com/questions/8590904/…

标签： css position navigationbar

【解决方案1】：

将导航类更改为：

#nav {
    list-style: none;
    position:absolute;
    right:50%;
    margin-right:155px;
    margin-top:220px;
}

【讨论】：

【解决方案2】：

不确定我是否理解正确，但这是您要查找的内容：

#nav {
    list-style: none;
    position:fixed;
    left: 0;
    top:220px;
}

还有你的小提琴：http://jsfiddle.net/wQdVv/16/

请注意，在移动设备上使用position:fixed 是个坏主意，因为支持不好并且会产生奇怪/不需要的结果。在移动设备上使用 static 代替（使用媒体查询）

【讨论】：

【解决方案3】：

因为

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>

上面的代码是一个简单的例子。

【讨论】：

【解决方案4】：

问题是

position: fixed;

在你的 CSS 中。

fixed 表示即使在滚动时也停留在屏幕的这一部分。将其更改为：

position: absolute;

并且导航栏将停留在您放置的任何位置并且不会移动，即使在滚动时也是如此。

您可以在W3 Schools阅读有关定位的更多信息

【讨论】：