jQuery:Menu fijo con scroll y detector de ubicación

Últimamente he visto que esta de moda hacer sitios web de una sola página con navegación vertical aprovechando de poner un scroll, con un menu fijo en la parte superior o a un costado  y además que se marque automáticamente en el menu mi posición actual. He probado varios plugins para hacer eso y ninguno me ha terminado de convencer, algunos no son nada flexibles, encontré uno muy bueno pero no tenía algo tan básico como una propiedad offset para detectar los márgenes, también existen opciones que usan hasta 4 o 5 plugins de jQuery, lo que me parece excesivo así que al final opté por usar 2 plugins:

  • Uno para el scroll (aunque este plugin de scroll aún puede ser reeemplazado por la función scrol y animation)
  • El plugin waypoints para detectar mi ubicación, todo el resto de funciones que es fijar el menu, cambiar el color del menu elegido, etc lo he hecho con un pequeño script.

 

Paso 1:

Lo primero es crear el menu, usando el muy clásico sistema de UL y LI, lo importante allí es el ID del menu, la clase de los links que me servirá para crear el scroll y los anchor que deben coincidir con el ID del div al cual queremos que nos lleve el scroll

1
2
3
4
5
6
<ul id="main_nav">
    <li><a class="smoothScroll" href="#inicio">Inicio</a></li>
    <li><a class="smoothScroll" href="#nosotros">Nosotros</a></li>
    <li><a class="smoothScroll" href="#servicios">Servicios</a></li>
    <li><a class="smoothScroll" href="#contacto">Contacto</a></li>
</ul>

 

Paso 2:

Luego hay que crear los contenidos, en mi ejemplo he utilizado la etiqueta article pero pueden utilizar DIV u otra etiqueta, lo importante es que el ID sea el mismo que el link en el menu y deben mantener la clase “post_article” que luego va a servir para detectar mi ubicación actual

1
<article id="inicio" class="post_article">Aqui va mi texto</article>

 

Paso 3:

Ahora que ya está la estructura, hay que darle estilo con CSS, no voy a detallar todos los estilos, eso lo pueden ver en el ejemplo, simplemente voy a especificar un par de clases que deben ponerse si o si

1
2
3
4
5
6
7
8
.isStuck {
width: 100%;
position: fixed;
top:0px;
}
a.current {
background-color: #222;
}

La clase isStuck sirve para que al realizar scroll, el menu quede fijo en la parte superior y la clase current sirve para marcar la opción del menu que esta activa

 

Paso 4:

Ahora sólo falta añadir el javascript, primero el codigo para crear el scroll y fijar un offset que en este caso es equivalente a la altura del menu

1
2
3
4
$('a.smoothScroll').smoothScroll({
offset: -80,
scrollTarget: $(this).val()
});

 

El siguiente javascript sirve para detectar la ubicación usando waypoints, la idea es muy simple, primero hay que averiguar la dirección del scroll si nos deslizamos hacia arriba o hacia abajo y según eso vamos a detectar el ID del contenido y averiguar a que opción del menu se refiere y según eso se marca añadiendo la clase “current”

1
2
3
4
5
6
7
8
9
10
11
12
// Waypoints
$('.post_article').waypoint(
function(direction) {
if (direction ==='down') {
var wayID = $(this).attr('id');
} else {
var previous = $(this).prev();
var wayID = $(previous).attr('id');
}
$('.current').removeClass('current');
$('#main_nav a[href=#'+wayID+']').addClass('current');
}, { offset: '40%' });

 

Finalmente hay que fijar la barra del menu en la parte superior cuando me desplazo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/// StickNav
var stickyNavTop = $('.nav').offset().top;

var stickyNav = function(){
var scrollTop = $(window).scrollTop();

if (scrollTop &gt; stickyNavTop) {
$('.nav').addClass('isStuck');
} else {
$('.nav').removeClass('isStuck');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});

 

Puedes ver la demo AQUI o descargar los archivos del ejemplo dándole like o tweet al post

Compartelo para poder descargar el ejemplo


 

4 comentarios en “jQuery:Menu fijo con scroll y detector de ubicación

  • Hola, Miguel, buenas tardes.
    Primero que todo quiero darte las gracias por el recurso, realmente es muy bueno.
    Sin embargo tengo una duda con respecto una sección del código:

    $(‘a.smoothScroll’).smoothScroll({
    offset: -80,

    Para pantallas superiores a 1100 para mi está muy bien offset: -80, sin embargo para versiones inferiores a 800 necesito un un offset: -20 ¿Sabes cómo variar este número dependiendo de la resolución en la que se va a mostrar?

    Disculpa, si te causo algún tipo de indisposición pero no encontré otra alternativa para solucionar este problema.
    Nuevamente gracias.

  • Muy bueno, realmente me ha sacado de un apuro, pero no me funciona tan bien como tu demo.
    Solo usas jQuery para este efecto, o utilizas algo más???
    Gracias

  • Además de jquery se usa smooth scroolll para la animación y jquery waypint para detectar tu ubicación actual

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Time limit is exhausted. Please reload the CAPTCHA.