Ú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
[cc lang=»html»]
[/cc]
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
[cc lang=»html»]
[/cc]
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
[cc lang=»css»]
.isStuck {
width: 100%;
position: fixed;
top:0px;
}
a.current {
background-color: #222;
}
[/cc]
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
[cc lang=»javascript»]
$(‘a.smoothScroll’).smoothScroll({
offset: -80,
scrollTarget: $(this).val()
});
[/cc]
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»
[cc lang=»javascript»]
// 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%’ });
[/cc]
Finalmente hay que fijar la barra del menu en la parte superior cuando me desplazo
[cc lang=»javascript»]
/// StickNav
var stickyNavTop = $(‘.nav’).offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$(‘.nav’).addClass(‘isStuck’);
} else {
$(‘.nav’).removeClass(‘isStuck’);
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
[/cc]
Puedes ver la demo AQUI o descargar los archivos del ejemplo dándole like o tweet al post
[social-download button_id=»4a9e3e93a42805bb1″ dl_id=»https://www.miguelmanchego.com/wp-content/uploads/2014/04/menu-scroll-navigation.zip» theme=»blue» message=»Compartelo para poder descargar el ejemplo» facebook=»true» likeurl=»CURRENT» google=»true» googleurl=»CURRENT» tweet=»true» tweettext=»» tweeturl=»CURRENT» follow=»true» linkedin=»true» linkedinurl=»CURRENT»/]
