Visualizar menú flotante superior al usar scroll a partir de una ubicación
Muchas veces visualizamos páginas web con una altura bastante elevada y a causa de esto dejamos de ver el menú superior y estamos obligados a utilizar el scroll hasta la parte superior para volver a visualizar la barra superior.
Para evitar esta situación incomoda se suele implementar un menú flotante, esto quiere decir que cuando vayamos a perder el menú superior porque hemos bajado a una parte inferior de la página web, el menú siempre estará visible siguiéndonos en nuestra vista.
Si queréis ver un ejemplo práctico pinchar el siguiente enlace:
DEMO
Como vemos en nuestra demo primero aparece una barra normal de color naranja pero al bajar con el scroll desaparece nuestra barra naranja fija y se convierte en una barra flotante de color azul.
*La diferencia de colores es para que el usuario pueda diferenciar mejor el cambio de menú fijo al menú flotante, en un caso real serían completamente iguales.
El código a implementar se va a dividir en tres partes:
1- Estilos para nuestro menú
.barraFlotante { background-color: #0C99D5; bottom: 0; color: #fff; height: 38px; left: 0; position: fixed; right: 0; top: 0; z-index: 1; box-shadow: #0C99D5 4px 4px 4px 0px; margin-left:6px; margin-right:6px; } .barraNormal { background-color: #EFA221; color: #fff; height: 38px; box-shadow: #EFA221 4px 4px 4px 0px; } |
2- Definir nuevo contenedor
<div class="menu barraNormal"><center>MENÚ SUPERIOR</center> </div> |
3- Definir JQuery
Primero debemos cargar la librería de JQuery;
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> |
Función que hará aparecer la barra flotante y ocultará la barra fija.
<script> $(window).scroll(function() { console.log($(window).scrollTop()); //cuando detecte un scroll mayor a 150 realizará el cambio de barras if ($(window).scrollTop() > 150) { //añadimos clase barraFlotante y eliminamos la clase barraNormal $('.menu').addClass('barraFlotante'); $('.menu').removeClass('barraNormal'); } else { //borramos la clase barraFlotante y añadimos la clase barraNormal $('.menu').removeClass('barraFlotante'); $('.menu').addClass('barraNormal'); } }); </script> |