Error en menú ancla con cabecera fija [Solucionado]

Con el avance de la tecnología se hace más común navegar por internet desde un celular. Por ello, muchas empresas quieren que sus web sean desarrolladas como Single Pages (webs con una sola página). Esto está bien para navegación móvil, pero nos da a los desarrolladores algunos problemas extras.

Lo más común es que usemos el menú ancla, ese que cuando das click no te cargue otra página si no que te ‘escrolee’ hasta la sección indicada. Esto es muy sencillo de hacer ya que solo tienes que poner en los enlaces del menú el numeral antes del nombre de la sección «#ubicanos». Pero el problema está cuando tienes una cabecera fija y que te acompaña siempre. Ya que al hacer el scroll, la sección queda detrás de la cabecera y casi siempre tapa el título de la sección.

Para solucionarlo tenemos muchas opciones:

1. Poner un margin-top sobre el título de la sección

Esto hará que no se tape el título pero la página puede verse con muchos espacios vacíos si navegas sin usar el menú.

2. Poner el id en una sección anterior

Para definir a donde me llevará el ancla necesitamos poner un «id» a un div u otra etiqueta. Bueno, si pones ese id en una etiqueta que esté en la sección anterior hará que el scroll vaya hasta ahí y no tape la sección que tu quieras ver.

El problema de esto es que no siempre podemos poner el id en diferentes lugares, sobre todo cuando cargamos el html vía loops.

3. Usar jQuery

Con jQuery podemos manipular los elementos de nuestro HTML de una forma sencilla. Y con unas cuantas líneas de código solucionamos este problema:

Primero debemos seleccionar el elemento que activa los anclas, osea, los enlaces del menú:

$('.navbar-nav li a').click(function(e){
    // Aquí se ejecutará el código
})

Luego debemos seleccionar el enlace clickeado y capturamos la sección a donde dirige:

$('.navbar-nav li a').click(function(e){
    // Evitamos que se haga el scroll
    e.preventDefault();
    // Capturamos el ancla
    var ancla = $(this).attr('href');
    // Le quitamos el numeral # para solo quedarnos con el nombre de la sección
    ancla = ancla.substring(1);
})

Y por último ya que tenemos el nombre de la sección obtenemos su posición y luego ejecutamos la animación scroll hasta ese punto pero restando algunos píxeles. En esos píxeles que restamos es donde definirás la altura que ocupa tu cabecera fija.

El código final sería:

$('.navbar-nav li a').click(function(e){
    // Evitamos que se haga el scroll
    e.preventDefault();

    // Capturamos el ancla
    var ancla = $(this).attr('href');

    // Le quitamos el numeral # para solo quedarnos con el nombre de la sección
    ancla = ancla.substring(1);

    // Obtenemos la posición de la sección
    var position = $('#'+ancla).position();

    // Hacemos el efecto scroll y le restamos algunos pixeles, en este caso 180
    $('html, body').animate({scrollTop: (position.top - 180)}, 0);
})

Listo! Eso es todo.

Si tienes alguna duda lo puedes dejar en los comentarios o escribirme vía twitter.

PD: Creo que debo hacer más ejemplos de jQuery para solucionar estos tipos de problemas.