Menu con imagen en html5 y css3

[fede5426]

Si estas usando fixed, raro que se desplace.. no debería moverse de su lugar por más rápido que scrollees..

Fijate si esto te sirve:

Código HTML:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
 

Código CSS:

nav{
    width:100%;
    padding: 2em 0; 
    position: fixed;
    top:0;
    left:0;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease;
}
 

Código Javascript:

//detectamos cuando el usuario haga scroll
$(window).scroll(function(){ 
        //si el scrollTop es mayor o igual que 200px... 
    if($(this).scrollTop() >= 200){
            //disminuimos el padding del nav para 
            //que no ocupe tanto espacio
            $("nav").css({"padding":".5em 0"})
            
        }
      //sino...
        else{
            //aumentamos el padding del nav nuevamente
            $("nav").css({"padding":"2em 0"})
            
        }
    
});
 

Básicamente modificas el padding del nav para que al hacer scroll cambie su tamaño y no moleste tanto para ver el contenido.

Usé padding para darle el alto al nav porque si le aplicaba un height, al asignarle "display:inline-block" a los items de lista, no se los puede alinear verticalmente al centro.. (a menos que se use flexbox que simplificaría mucho las cosas).

Acá te dejo un demo para que veas que funciona y no se desplaza a ningún lado:

http://codepen.io/fede5426/pen/OVaBLe

Saludos