Reposicionar al hacer scroll

Buenas, he visto que hay un evento en javascript el onscroll que puede realizar una accion al hacer scroll en la web, mi pregunta es como puedo poner que esa accion sea reposicionar un menu nav de html5 otra vez en la parte superior de la web?

Es decir que cada vez que hago scroll el menu se reposicione en la parte superior de la web.

Muchas gracias.

Vale!! es sencillo, te prepare uno rapidin..

Este esl codigo html

Código :

<section class="dtp-menu-main">
   <nav class="dtp-menu-body">
      <ul class="dtp-menu">
         <li class="dtp-item-menu"><a href="#">Enlace 1</a></li>
         <li class="dtp-item-menu"><a href="#">Enlace 2</a></li>
         <li class="dtp-item-menu"><a href="#">Enlace 3</a></li>
         <li class="dtp-item-menu"><a href="#">Enlace 4</a></li>
      </ul>
   </nav>
</section>

No puede faltar el CSS

Código :

.dtp-menu,
.dtp-menu-main{
   display: table;
   width: 100%;
}

ul.dtp-menu{
   margin: 0
}

.dtp-menu{
   padding: 0;
}

.dtp-menu-main{
   height: 50px;
}

ul.dtp-menu{
   list-style: none;
}

ul.dtp-menu li{
   padding: 0 10px;
   border-top: 1px solid #a3a3a3;
   float: left;
}

ul.dtp-menu li,
ul.dtp-menu li a{
   color: #eee;
}

ul.dtp-menu li a{
   text-decoration: none;
   padding: 10px 20px;
   display: block;
}

ul.dtp-menu li a:hover{
   color: #fff;
   background: #737373;
}

.dtp-menu-body{
   background: #333;
}

.position-top{
   position: fixed;
   width: 100%;
   top: 0;
}

y el acto mágico.. el jquery

Código :

/* Guardamos el valor que hay desde la parte superior del menu
 * y la parte superior de la ventana
 */
var pMenuTop = $(".dtp-menu-body").position();
/*
 * Cuando se hace scroll se hace la magia
 */
$(window).scroll(function(){
   // guardamos en una variable la posicion del scroll de la ven tana
   var pWinTop = $(window).scrollTop();
   // Si la posicion del scoll de la ventana es mayor o igual a la posicion de la parte superior del menu ...
   if(pWinTop >= pMenuTop.top){
      // ... añade la posicion fija
      $(".dtp-menu-body").addClass('position-top');
   }

   // y si no...
   if(pWinTop <= pMenuTop.top){
      // ... quita la clase con la posición fija
      $(".dtp-menu-body").removeClass('position-top');
   }
});

Espero te sirva.. esta comentadito y todo para que sepas como funciona y lo modifiques a gusto..

puedes poner el menú donde se te venga en gana... si el menú toca la parte superior de la ventana del navegador... el va a quedarse fijo..

saludos...

no se si es lo que queres hacer, pero creo que position fixed podría ayudarte...

SinSemilla escribió:

Bueno, evidentemente, la posicion fija en css, se usa cuando el menú está en la parte superior de la pagina, y no hay mas elementos sobre el..

supongamos que el tiene un banner y abajo del banner quiere tener el menú.. es evidente que la posicion fija, no es la mejor opcion. Yo creo que el quiere un menú como el que esta en el perfil de google+, que haces el scroll y cuando el menu esta apunto de taparse, de vuelve fija... y para eso es el codigo jquery q yo le proporcioné..

no se si alguien tenga un código más compacto que haga el trabajo.