Menú Horizontal con Indicador de Scroll (Scroll-Aware Navigation) con JavaScript y CSS.

VÍDEO BASE PARA EL MENÚ: • Crea un Menú Horizonta...
En este vídeo te voy a mostrar cómo poder hacer un Menú Horizontal Responsive que responda dinámicamente a la sección en la que nos encontramos si tenemos un OnePage webiste, esto usando CSS Flexbox, usando un poco de Vanilla JS. Sucríbete para más vídeos como éste. :)
-------------------------------------------------------------------------------------------
Sígueme en Facebook:
/ xpstutoriales
E - mail: [e-mail]
ACCESO AL CÓDIGO FUENTE EN MI PATREON: / lexterxps
No olvides dejar tu Like y compartir para seguir creciendo. :)

[@arielsouto7326]

Me volví loco buscando un tutorial así, mil gracias, super entendible!!

[@tinchotinchocarp]

Una locura bro, muy bueno!

[@Lairon2700]

No dejes de subir videos, bro, son muy buenos.

[@LexterDev]

Gracias bro! Y claro que no, se vienen nuevos vídeos con muy buenos temas.

[@leonelcarpinteyro]

Buen video!

[@piovladimirgarcesmora3973]

tus videos son una maravilla!! Muchas gracias por la informacion.

[@gabrielmeza9467]

Funciona pero deja de funcionar cuando pasa por la segunda sección, revisé desde 0, tengo todo correcto pero no funciona.

[@gasparbrito2061]

Merecido like, y nueva suscripción :)

[@yacko104]

hola, lo estoy haciendo tal cual el video pero no me está funcionando, yo le estoy poniendo las variables de mi class, y lo otro lo estoy haciendo tal cual pero no me funciona, podrías ayudarme?... lo tengo así: const sections = document.querySelectorAll(".seccion"); const menuItems = document.querySelectorAll(".menu-item"); const funcionOberver = entries => { entries.forEach(entry => { if (entry.isIntersecting) { const itemActual = Array.from(menuItems).find(item => item.dataset.url === entry.target.id); itemActual.classList.add("active"); for (const item of menuItems) { if (item != itemActual) { item.classList.remove("active"); } } } }) } const observer = new IntersectionObserver(funcionOberver, { root: null, rootmargin: "0px", threshold: 0.8 }); sections.forEach(section => observer.observe(section))

[@robertserranofotograf]

Hola Alex, felicidades por el tutorial y mil gracias por compartir tu conocimiento y tu buen explicar. el tutorial del menú i el código js me han servido de mucho para aprender mas pero solo funciona en secciones con un height definido por ejemplo height:100vh; pero con height auto no funciona. hay alguna manera para solucionar esto ? gracias por compartir.

[@heinerarevalo9931]

funciona al hacer click?

[@teamsoftcode7883]

puedes compartir el código favor, no me funciona el select scroll..

[@iranaguirre9318]

Me manda un error me dice que Uncaught TypeError: secciones.forEach is not a function

[@LexterDev]

Revisa el nombre de las variables, aparentemente tienes un error con eso y no encuentra la variable que usas.

[@ezequielrood2047]

Gracias me sirvió mucho

[@LexterDev]

Con gusto, y qué bueno que te haya servido. Un saludo 👋

[@mateocruz8325]

Buen video bro gracias

[@LexterDev]

Con gusto bro. Un saludo.

[@aldoortiz5761]

saludos , no se porque me pasa mucho que aun haga exactemente como esta en el video, no me sale. Lo tengo como lo explcias pero no me funciona :/

[@LexterDev]

Sigues con el problema? Te da algún error en la consola?

[@clubdroogie8985]

Necesito el código

[@jeffersonsalazar668]

Este tutorial te quedo muy duro y sin ir al gym

[@fernandocaballero8615]

no me quedo

[@LexterDev]

Por qué bro? Qué pasó?

[@fabiansantin6943]

No funciona tu código

[@LexterDev]

Seguro? Cuál es el error o problema?

[@fabiansantin6943]

@@LexterDev el observer no captura el evento del scroll