Crear un sticky menú con Bootstrap 3.3.0


Bootstrap, reconocido como uno de los frameworks más populares para el maquetado de sitios y aplicaciones web actualmente está en la versión 3.3.0. En este tutorial te enseñaré como utilizar el plugin Affix del framework para crear un sticky menú.

Este tipo de menú se ha popularizado mucho en las tendencias actuales de diseño, pues su comportamiento es muy atractivo en cuanto a usabilidad se refiere. Si no conoces este tipo de menú, puedes inferir de qué se trata por la terminología sticky, palabra en inglés que significa “pegajoso”.

Un ejemplo concreto de este tipo de menú lo puedes ver en la propia documentación de Bootstrap (menú lateral derecho), y su utilidad se nota en los documentos o artículos largos donde al dar scroll se necesita que el menú quede siempre visible para navegar por el documento HTML.

Funcionamiento básico de Affix

Lo primero que debes conocer es la estructura html del contenido que deseas convertir en Affix. Puedes utilizar cualquier elemento html que desees, pero lo común es que utilices una lista de ítems que denoten la navegación que deseas mantener visible a lo largo de todo el documento (como un navbar o aside).

Vamos a utilizar en este ejemplo una lista desordenada (ul) que contenga algunos hipervínculos que emularán la navegación del sitio y la convertiremos en sticky cuando el usuario de scroll hasta cierto punto, punto que va a coincidir con el posicionamiento de la lista desordenada en el tope de la página web.

La labor del plugin es mantener en una posición fixed el menú de navegación cuando éste llega al tope por la acción del scroll hecha por el usuario. Al plugin se le debe decir cuándo debe cambiar la navegación a fixed mediante la propiedad offset-top. También éste debe ser capaz de revertir al estado inicial la navegación cuando se da scroll hacia arriba.

Manos a la obra

Como precondición debes tener adicionado el framework Bootstrap, el html inicial es el siguiente:

<!DOCTYPE HTML>
	
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

<div class="container">

<div>

Vamos a crear dentro del container una estructura de dos columnas, donde la primera va a contener el menú de navegación y la segunda va a tener contenido de muestra para que se pueda dar scroll. Adicionalmente pondré arriba de estas dos columnas un bloque de contenido (un div con clase jumbotron) para que puedas apreciar mejor el efecto.

<div class="jumbotron">
    <h2><strong>MyCyberAcademy</strong> <span class="text-muted">lorem ipsum affix demo</span></h2>

    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet corporis cum deserunt dolore doloribus
        eius ipsam magni, minima natus nesciunt nihil officia quam quas reiciendis repellat soluta veniam,
        veritatis! Voluptates.
    </div>
    <div>Aliquid consequatur esse neque possimus. Atque beatae cum dignissimos dolore dolorum eveniet explicabo
        harum, id in maiores minus modi, nihil nulla, numquam rem tempora ullam. Delectus est sapiente totam
        voluptate?
    </div>  
</div>

<div class="row">
    <div class="col-md-4">
        <h3>Contenido superimportante del Aside</h3>
    
        <p>
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, impedit, pariatur perferendis voluptatum tenetur repellat nemo adipisci laudantium officia nesciunt. Esse atque nulla facilis vel maiores repudiandae sed incidunt corporis!</span><span>Illum, odio, maiores ut ex rerum natus sunt velit minima impedit odit. Atque, alias quos quod laboriosam beatae aperiam dignissimos incidunt at ullam hic fugiat consequuntur provident expedita deleniti fugit.</span>
        </p>

        <hr>    
        
        <!-- navegación para hacerle affix -->
        <ul  data-offset-top="520" data-spy="affix" class="nav nav-pills">
            <li class="active"><a href="#" >Home</a></li>
            <li><a href="#products">Products</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact US</a></li>                
        </ul>
        
    </div>
    <div class="col-md-8">
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda debitis illum iusto nobis odio, omnis
            quas sequi vel velit vitae! Alias at enim impedit necessitatibus odit quibusdam, ratione rem veniam!
        </div>
        <div>Amet minima neque quasi. Amet eos mollitia, nihil obcaecati recusandae vel? At corporis deserunt ducimus
            eligendi eveniet expedita minima optio? Accusamus aliquam cum eos illum modi molestiae mollitia officiis
            provident.
        </div>        

        <!-- muchos más lorem ipsum para poder dar scroll -->
       
    </div>
</div>

Lo más importante del código anterior es la declaración de la navegación, el atributo data-spy=”affix” es el encargado de inicializar el plugin, mientras que el atributo data-offset-top=”520” especifica que el plugin se debe activar cuando el usuario ha hecho scroll hasta una altura de 520 pixeles.

Este offset varía en dependencias de la ubicación del elemento que se quiera convertir en Affix, en este caso la navegación se encuentra a 520 pixeles aproximadamente del tope de la página, es por ello que se toma este valor como el offset superior.

Con lo anterior escrito debes poder ver en el navegador algo similar a esto:

Maquetado inicial

Fig1: Maquetado inicial

Si das scroll verás que efectivamente el plugin funciona, pero pone la navegación en una posición bastante alejada del tope de la página (ver Fig2). Esto sucede porque el plugin no sabe a qué distancia posicionar el elemento luego de cambiada su posición a fixed, por lo que debes hacerlo tú de forma manual.

Elemento mal posicionado

Fig2: Elemento mal posicionado

Para solucionar esto sólo tienes que añadir un pequeño que estilo CSS indicando la nueva posición donde quieras que se encuentre el elemento de clase affix, para este caso es suficiente con hacer lo siguiente:

<style>
    ul.affix {
        top: 40px;
    }   
</style>

Observa que lo he posicionado a 40 píxeles del tope, por lo que al dar scroll se verá correctamente. Estos 40 píxeles no son fijos para todos los casos, debes adaptarlo a tu caso en concreto.

Si ahora das scroll hacia arriba y hacia abajo puedes ver cómo de forma fluida el ul se adapta perfectamente a los cambios, y lo más interesante que debes notar es cómo el elemento toma su lugar de origen cuando se da scroll hacia arriba y se vuelve al inicio de la página.

Conclusiones

Si bien el plugin Affix no es perfecto para todos los proyectos, sí que ofrece una mejor accesibilidad para los usuarios que visitan tu sitio. Te doy como dato adicional que la nueva tendencia de diseño creada por Google: “Material Design” explota al máximo esta técnica combinada con animaciones, logrando así un efecto orgánico en las interfaces de las aplicaciones que creo será la nueva tendencia de diseño para el 2015.

Esto es todo, a continuación te muestro un pequeño video con el resultado que espero te sea de ayuda y te dejo además el demo donde puedes obtener la versión 3.3.0 de Bootstrap.

Sin más, te invito dejes tus impresiones en los comentarios, nos vemos en próximas entradas.