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- CSS: Estilos de nuestra barra.
  • 2- HTML: Definir contenedor.
  • 3- JQuery: Script que detecte la posición de nuestro scroll.
  • 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>

    DESCARGAR DEMO AQUÍ

    Iván Martínez

    Ingeniero Informático apasionado por el mundo del desarrollo WEB. Me gusta caminar por este mundo lleno de tecnologías y día a día aprender cosas nuevas como el doctor Frankenstein ¡dadme cosas para experimentar!

    Deja un comentario

    Tu dirección de correo electrónico no será publicada.