Menú fijo con efecto Scroll - HTML CSS y Javascript Puro
ฝัง
- เผยแพร่เมื่อ 25 ส.ค. 2024
- Creando un encabezado menu fijo que al hacer scroll cambia de color y fondo. Todo con Html, css y javascript vanilla.
Descarga el código:
mangatschool.c...
Después de ver el tutorial podrás crear tu propio menu scroll con javascript
#menufijo #menuscroll #menujavascript
TE AMO, estuve buscando como loco tutoriales y tu fuiste el unico que lo explico demasiado bien
Gracias a ti estoy aprendiendo aun mas de manera autodidacta!🍓
Excelente!, sigue adelante colega
Increìble! Muchas gracias por la clase!! Todo es muy claro y funciona!
saludos!
Excelente video, habia probado varias formas y solo con esta funcionó. Ahora mi página estará con un detalle notable. Gracias.
excelente, no te olvides del responsive!
@ si esa parte debo solucionar aún, pero ya con esa parte voy a poder hacer que funcione. Pequeñas modificaciones mas y quedará perfecto
Venía buscando otra cosa de html pero me encontré esto, muy bueno
Muchas gracias
EXCELENTEEEEE. ME SALVASTE DE UNA MUY GRANDE. TE QUIERO.
Tipazo, vaya manera de explicar, sin tantas vueltas, pero digerible a la perfección.
Gracias colega
Muchas gracias por sus tutoriales están increíbles además que están explicados de la mejor manera
Hola, muchas gracias
explicación clara y perfecta, me suscribo y like... Eres grande
Excelente video. Una de las mejores explicaciones que he visto.
Muchas gracias
Mano excelente. me sirvió full. no termine de ver el video 😅. pero el codigo esta muy faicl de entender asi que excelente
jejeje dale, gracias
Excelente video. mil gracias por realizar contenido de CALIDAD. Gracias!!!!
gracias amigos cada dia aprende uno algo nuevo
Así es. Gracias por tu visita
Que bien que explicas! Gracias!
muchas gracias
Me ayudaste mucho en una duda que tenía. Gracias perri
Me has salvado, estoy agradecido, like y suscripción
Con gusto
fantastico, agradecido por tu enseñanza amigo.
gracias
Mil gracias, me sirvió muchísimo. Muy clara la explicación
Muchas gracias por dejar tu comentario. Tenemos otro vídeo de lo mismo pero responsive design, puedes buscarlo en el canal. Hasta pronto.
Buenísimo, muy buena explicación!
Buen video, es justo lo que necesitaba, se agradece!
De mucha utilidad el video.
Mil gracias
muchas gracias, saludos
WTF?
en 13 min me diste la explicacion de lo que en otros videos se demoraban 40 min, grande.
Pos: tienes el codigo muy optimisado
Al ver ATS pensé en un canal de TH-cam, pero creo que me equivoqué
Muchas gracias! Me sirvió mucho, suscrito !!
Gracias, saludos
Gracias, justo lo estaba necesitando!
Excelente!
gracias bro me sirvió mucho
Excelente
Muchas gracias, excelente explicación
Que gran video amigo, me ayudaste demasiado!
Gracias amigo, un saludo y hasta pronto
muchisimas gracias
crack!!
saludos!
un genio!! ame tu video, muchas gracias por compartirlo 😍😍
Con mucho gusto
Excelente!!!!
gracias por tu visita, saludos
Gracias!
Me sirvió MUCHO!
Excelente
TE AMO, gracias!!
Con gusto
gracias papu me salvaste la vida jajajaj
Gracias por tu visita saitama jajaja deja tu like y suscribe a todos los héroes
Capo viejo!
No se les olvide ponerle el id de header al header para poder que funcione el js
donde va el id amigo
Muchas gracias hermano!
Me alegra haber sido de ayuda, bendiciones colega
buscaba un efecto que haga que se desplace el menú hasta desaparecer arriba, como el menú superior de WhatsApp, pero bien ya tengo una idea por donde seguir.. gracias
entendido, saludos
Gracias amigo!
Saludos!
Genio!
Me ayudó muchísimo tu tutorial. Jaja pero parece que nos explicas corriendo jaja saludos
es que estaba estresado :(
Agradecido!
Gracias, por cierto acabamos de subir hace unos días un vídeo que hace este menu fijo scroll en responsive design. Hasta pronto.
excelente
thanks
Saludos, tengo un problema ojala y me puedan ayudar, Cuando hago scroll y presiono cualquier parte de la pantalla me vuelve a mandar hacia arriba.
imposible ayudar sin ver el código, recuerda que puedes ver mi código completo y descargarlo desde el link que puse en la descripción del video.
11:05 le puse ">50" para ver que pasaba y me funcióna exactamente igual. También probe sin ponerle mayor a nada y también funciona. Entonces para que sirve? 🤔
es para que se active, sólo eso
@ pero sin eso esta activado igual. porque funciona igual... :/
es html5?
hola, una consulta.. si tuviera la barra de navegacion en otro archivo.. por ejemplo header.html y este archivo estuviera en una carpeta "modules" es decir modules/header.html y yo tengo
como hago que funcione el script en el index.html o en otra parte de la pagina.. porque solo funciona en el header.html (agregando varios lorem) XD
Hola, esa configuración debes hacerlo en la web original y recién incrustar el iFrame. Saludos
hola tengo una duda yo ya tenia mi menú y si servía completamente y me llevaba a las otras páginas pero ahora este menú no sirve como seria para ponerle el código y me lleve a otras páginas así como la de nosotros o contactarnos
solo coloca el enlace de cada página
Me sirvio bastante pero tengo problemas, al inspeccionar no me muestra la clase "abajo", y de hecho el fondo es todo blanco y no noto la animación, ya cambie color de todo pero ni asi, solo se cambia el de las letras pero del fondo de menu, no ya vi el video varias veces, re escribi el codigo en cada video y no, nada :c
espero puedas ayudarme y ver que hice mal o porque no esta bien mi proyecto
Hola, en la descripción del vídeo puedes ver y descargar el código, así verifica y encuentra error. Intenta ir al navedagor, inspeccionar y consola, en ese lugar debe aparecer algún mensaje de error. Vamos tu puedes!
@ gracias, gracias, te lo agradezco mucho-!!
@@josephreyes5791 me alegra mucho, bendiciones y hasta pronto.
buen video
Muchas gracias
Como le hago para cambiar el header pero en un proyecto react? tengo mi header como un componente con sus estilos independientes y en mi index solo lo invoco como una etiqueda
no se tu dime :(
@ actualización: no supe se estancó el proyecto jajajaj :(
buenas yo trabajo en visual studio code pero no se porque el codigo donde agrgar lo de java no funciona tengo las extensiones y todo esta correcto ya lo revise
mejor copia y pega, el código lo tienes en la descripción del video
Hola al momento que le doy el scroll hacia abajo me captura la clase "ABAJO" pero no llama al estilo definido, por que puede suceder ?
Volver a hacerlo porque el ejercicio funciona perfectamente
@ Hola pues no se si sera por la version del Javascript pero lo que hice fue cambiar el header .abajo del CSS y solo ponerlo como .abajo para que lo reconociera, ya que si lo dejaba veia que tomaba la clase pero no la asignaba
Gracias de todos modos, el tutorial muy bueno me sirvio.
Una pregunata al final para cambiarle color a los iconos que forma de seleccion es esa? Gracias muy bueni el vidio
Selectores, hay varios, lo mejor es que revises la documentación completa en Google, así tendrás más claro el.tema, saludos
Hola
Esta excelente este video
Sera que puedo tomar tu JAVASCRIPT?
Me sirve para un trabajo !
Claro, es la descripción del video
@ Ah si mira
Ay muchismas gracias !!
Buen video bro. Puedes hacer un video de como poner este codigo en una plantilla de wordpress
Lo tendré en cuenta
@ Gracias brou
gracias, aprendi mucho solo tengo una duda y si quiero que la animacion empiece cuando termine la imagen?
Dale altura en vh y configura que se active con ese calor de scroll
Hola amigo, implementé tu código en mi proyecto de angular, pero se ven afectadas las otras pestañas, y solo quiero que sea en el index.
Lamentablemente no manejo angular y no tengo como revisar tu código
como puedo hacer para que cambie la img del logo tambien?
Tengo otro vídeo de ese tema
Como agrego eso a mi pagina web?
uhmmm, es simplemente agregar, es decir copiar y pegar
@ donde consigo el codigo html ?
hola buen video, tengo una consulta como podría poner un logo antes de CAT LOVER? gracias :)
Tengo otro vídeo con logo
Hola Amigo.. es un excelente tutoría, y muy bien explicado.. pero tengo un problema, funciona todo perfecto pero cuando el scroll lo subo la barra del reader desaparece abruptamente y no como cuando bajo el scroll.. tienes alguna solución.? hice todo tal cual indicaste en el video. gracias
En la descripción puedes descargar el código completo, recuerda que las máquinas y el código no cometen errores, nosotros lo humanos si :(
Gracias amigo, una duda alguien le pasa que cuando vuelves a subir el scroll no se quita la clase abajo? Osea se queda el color blanco y las letras en negro
si se quita, así que vuelve a intentarlo
No me aparace la imagen que hago :(?
sigue intentando o copia y pega el código
tengo un problema, cuando le quiero poner un enlace al inicio y los demas no se puede, o no me los lee, no se que pasa :(
debes analizar el codigo y descubrirlo
like por el gato basado
El gato manda 😎
como puedo aplicar eso para mi pagina de shopify?
Pregunta a shopify, por algo pagas mensualmente, así que sácale provecho. En este canal sólo damos ayuda en wordpress
HOLA... PODRIA HACER LO MISMOOOO, PERO LOS HEADER, LOS HEADER UL, ETC, EN UN ARCHIVO CSS???... muchas gracias desde ya.
Por supuesto!
Ya logre hacerlo. Gracias de todos modos. Aunque ya que sabes mucho me gustaria consultarte un par de cosas. Saludos.@
Pregunta, es responsive?
No, en el canal hay 2 videos de menú responsive
@ gracias bro
holaa, qué tal?
muy buen video, me sirvió un montón.
¿Cómo funcionaría esto para responsive?
Aplicando media queries
Es responsive?
Hay otro
Oye
que hubo ...