Ú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 |
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 > 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
[social-download button_id=»4a9e3e93a42805bb1″ dl_id=»http://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»/]
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.
Eso lo encuentras aqui http://www.responsivejavascript.com/
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
Muchas gracias por el aporte amigo, en pleno auge de los sitios web mediante scroll esto cae como anillo al dedo, una recomendación, aumentar el tiempo de movimiento que viene de 400 a 1000, para que no sea un movimiento tan brusco y mejorar el movimiento y barra de scroll con «niceScroll» que en conjunto con vuestro demo, funcionan de maravilla.
Le he realizado algunos ajustes y la verdad me ha quedado de maravilla, comenzaré a utilizarlo más a menudo.
Saludos Maestro!
hola, buenos dias, o tarde o noche jajaja, bueno mi duda es la siguiente que pasa si yo quiero hacer un contenido q se mueva horizontalmente, hice un navbar con bootstrap que al hacer click en cada enlace se mueve horizontalmente hasta llegar a la seccion clickeada, mi problema es q el menu se queda en la primera pagina y no estatico en la parte de arriba, este codigo me serviria para ese proposito?
Una pregunta (Estoy comenzando en el mundo de la programación). tengo mi web diseñada, el menú y todo. Lo único es que no me marca la posición en la que estoy navegando. aquí dejo el enlace inversora3356.com.ve si me puedes ayudar a ubicar la parte que debo modificar para lograr esto