Como crear una barra de menú que se vuelva fija al desplazar la hoja

| 15 octubre, 2015 | JQuery/Javascript | No hay comentarios

Siguiendo con los temas de JQuery hoy vamos a ver un ejemplo sencillo de como crear una barra de menú que se mantenga fija o fixed en la parte superior de la hoja cuando nos desplazemos de arriba hacia abajo.

El css de estilo que voy a utilizar es lo muy básico para que la barra de navegación se vuelva fija, lo que sea que pongas dentro del menú (enlaces, botones, etc) queda a tu necesidad.

El css a utilizar es el siguiente:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#contenedor{
  border: 1px solid green;
  width: 400px;
  margin: 0px auto 0px auto;        
}
 
.espaciador{
  height: 300px;
}
 
.fondo-azul{
  background-color: lightskyblue;
}
 
/*css basico para el menu*/
#menu{
  text-align: center;        
  padding: 5px 0px;
  transition: all .5s;  
}
 
#menu.fixed{
  position: fixed;
  top: 0px;        
  z-index: 100;  
  background-color: #DDD;
  transition: all .5s;
  /*con left: 0 el menu inicia desde el borde izquierdo,
  asi tomara el ancho de todo el navegador.
  Si utilizas la siguiente opcion tambien debes poner como ancho 100%*/
  /*left: 0;        
  width: 100%;*/
}
/*fin css basico para menu*/

Como notas lo importante aquí es el css básico para el menú. En #menu.fixed podrás ver que los parámentros left y width estan comentados, esto hará (con ayuda de JQuery) que la barra de menú tenga el mismo ancho que el contenedor. Ej:

menu1

Por el contrario si queremos que la barra de menú tome todo el ancho del navegador solo debemos descomentar esos dos parámetros para obtener este resultado:

menu2

Bien, el siguiente paso es añadir el contenido html del menú:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="contenedor">
  <div class="espaciador"></div>  
  <!-- menu fixed -->
  <div id="menu">
    <button>Boton 1</button> <button>Boton 2</button>
  </div>
  <!-- fin menu fixed -->
  <div class="espaciador"></div>    
  <div class="espaciador fondo-azul"></div>    
  <div class="espaciador"></div>    
  <div class="espaciador fondo-azul"></div>    
  <div class="espaciador"></div>    
  <div class="espaciador fondo-azul"></div>
  <div class="espaciador"></div>    
  <div class="espaciador fondo-azul"></div>
</div>

Lo importante aquí es el div del contenedor y el menú, lo demás lo utilizo de relleno para poder visualizar el efecto de la barra fija más adelante. Por último escribimos el código que permite hacer la barra fija.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script src="../jquery-1.11.2.min.js"></script>
<script>
  $(document).ready(function(){
    //toma la posicion inicial del menu
    var posicionMenu = $('#menu').offset().top;
 
    //funcion que se dispara al desplazar la hoja
    $(window).on('scroll', function() {
      //cuando el scroll sobrepase la posicion del menu se vuelve fixed
      if ($(window).scrollTop() > posicionMenu) {
        $('#menu').addClass('fixed'); //agregamos clase fixed al menu
        //comentar la siguiente opcion si se utiliza left
        $('#menu').width($('#contenedor').width()); //toma el ancho del contenedor
      } else {
        $('#menu').removeClass('fixed'); //quitamos la clase al menu
        //comentar la siguiente opcion si se utiliza left
        $('#menu').width(''); //remover el ancho del contenedor
      }
    });
  });
</script>

Como indico en el código si lo que queres es que la barra tome todo el ancho entonces además de descomentar left y width en el css debemos comentar en JQuery las líneas de comando que asignan ancho.

A continuación también te lo dejo todo armado por si se te hace más fácil.

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <style>
      #contenedor{
        border: 1px solid green;
        width: 400px;
        margin: 0px auto 0px auto;        
      }
      
      .espaciador{
        height: 300px;
      }
      
      .fondo-azul{
        background-color: lightskyblue;
      }
      
      /*css basico para el menu*/
      #menu{
        text-align: center;        
        padding: 5px 0px;
        transition: all .5s;  
      }
      
      #menu.fixed{
        position: fixed;
        top: 0px;        
        z-index: 100;  
        background-color: #DDD;
        transition: all .5s;
        /*con left: 0 el menu inicia desde el borde izquierdo,
        asi tomara el ancho de todo el navegador.
        Si utilizas la siguiente opcion tambien debes poner como ancho 100%*/
        /*left: 0;        
        width: 100%;*/
      }
      /*fin css basico para menu*/
    </style>
  </head>
  <body>    
    <div id="contenedor">
      <div class="espaciador"></div>  
      <!-- menu fixed -->
      <div id="menu">
        <button>Boton 1</button> <button>Boton 2</button>
      </div>
      <!-- fin menu fixed -->
      <div class="espaciador"></div>    
      <div class="espaciador fondo-azul"></div>    
      <div class="espaciador"></div>    
      <div class="espaciador fondo-azul"></div>    
      <div class="espaciador"></div>    
      <div class="espaciador fondo-azul"></div>
      <div class="espaciador"></div>    
      <div class="espaciador fondo-azul"></div>
    </div>
    
    <script src="../jquery-1.11.2.min.js"></script>
    <script>
      $(document).ready(function(){
        //toma la posicion inicial del menu
        var posicionMenu = $('#menu').offset().top;
        
        //funcion que se dispara al desplazar la hoja
        $(window).on('scroll', function() {
          //cuando el scroll sobrepase la posicion del menu se vuelve fixed
          if ($(window).scrollTop() > posicionMenu) {
            $('#menu').addClass('fixed'); //agregamos clase fixed al menu
            //comentar la siguiente opcion si se utiliza left
            $('#menu').width($('#contenedor').width()); //toma el ancho del contenedor
          } else {
            $('#menu').removeClass('fixed'); //quitamos la clase al menu
            //comentar la siguiente opcion si se utiliza left
            $('#menu').width(''); //remover el ancho del contenedor
          }
        });
      });
    </script>
  </body>
</html>

Por último no me puedo ir sin dejarte un demo para que veas como quedaría al final. DEMO.

Entradas relacionadas

Sobre el Autor

hug0

Programador web, intento de runner, aficionado a Formula 1 y MotoGP. Habilidad especial: Comer 12 porciones de pizza con todo y orilla

Deja un comentario