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 CSS:
Ver originalnav{
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
:
Ver original//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