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>

DESCARGAR DEMO AQUÍ