Comunidad de diseño web y desarrollo en internet online

Reposicionar al hacer scroll

Citar            
MensajeEscrito el 04 Ago 2015 03:57 pm
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.

Por loadgo

1 de clabLevel



 

chrome
Citar            
MensajeEscrito el 17 Ago 2015 06:22 am
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...

Por franqgeek

48 de clabLevel



Genero:Masculino  

Desarrollador Web

chrome
Citar            
MensajeEscrito el 18 Ago 2015 12:49 pm
no se si es lo que queres hacer, pero creo que position fixed podría ayudarte...

Por SinSemilla

Claber

336 de clabLevel



Genero:Masculino  

i am that i am...

firefox
Citar            
MensajeEscrito el 20 Ago 2015 12:53 am

SinSemilla escribió:

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


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.

Por franqgeek

48 de clabLevel



Genero:Masculino  

Desarrollador Web

chrome

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.