How to make the Navigation bar not move when window scrolled down CSS?

问题

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!

HEEELP!

here is my example!

jsfiddle.net

回答1:

Change your nav class to:

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

回答2:

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/

Do note that position:fixed on mobile is a bad idea, as support is not good and will produce strange/unwanted results. Use static on mobile in stead (with a media query)

回答3:

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.

.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.

回答4:

The problem is the

position: fixed;

in your CSS.

fixed means stay in this part of the screen, even when scrolling. Change it to:

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

来源：https://stackoverflow.com/questions/17842114/how-to-make-the-navigation-bar-not-move-when-window-scrolled-down-css

标签

css

position

navigationbar