Menú pegajoso(sticky) con html, css y javascript
ฝัง
- เผยแพร่เมื่อ 12 ก.ย. 2024
- Menu desplegable: • Menú desplegable respo...
Menu horizontal: • Botón 3d con efecto To...
Síguenos en facebook: / jygproyectosweb
Únete a nuestro grupo: / 1639298496227219
Síguenos en Twitter:
/ jygproyectosweb
Apóyanos con un me gusta y compartiendo este video, muchas gracias a todos :)
gracias!!! Me encanta como explica se entiende a la perfección, saludos desde Lima.
Excelente trabajo el que haces en tus videos! Explicas super bien y, LO MAS IMPORTANTE, Javascript PURO! Gracias y saludos de un Argentino en Rusia!
¡Eres increíble!, no sabes el gusto que me da ver tus videos super bien explicados.
===¡¡Se agradece demasiado!!.===
que bien explicas, haces que sea sencillo hasta para alguien que no se dedique a esta area,sigue asi exitos y saludos de colombia.
Excelente, simple y limpio, hay otras opciones con jquery o plugin, pero esta es la mejor que he visto.
Loco , explicas muy bien, agradezco tus videos , eres muy buen maestro!, ¡Gracias!
Jean Carlos como siempre un excelente video muchas gracias. Esas clases para capturar la medida en pixeles no me la sabía. Grande muchas gracias.
Gracias por los videos. Son muy útiles y fáciles de entender.
Saludos desde Eslovenia!
Excelente, no sabes cuanto busque hacer esto sin Jquery. Gracias!
Gracias amigo, saludos desde portugal, un venezolano en apuros que ayudo mil gracias...
Excelente. Que bien te explicas compañero. Haces que todo parezca tan fácil. Saludos y gracias por compartir.
Un tutorial buenísimo, como siempre, gracias!.
Una sugerencia: Podrías hacer un video dedicado a los sonidos. (Es decir, por ejemplo, cuando se pasa el cursor por encima de un botón y suena un "click!" o cosas por el estilo. En mi opinión es un tema interesante y daría algo de variedad a los tutoriales. (Sólo es una idea). Felicidades por el canal!!!
+JC Llaberia Todo eso se realiza con javascript u jquery
+Esequiel Erick R.T Bueno. pero aunque se realice con javascript y todo eso, si el dueño del canal cree que es acertado hacer un vídeo sobre este tema, yo personalmente no lo veo descabellado, más bien creo que enriquecería el canal. Saludos.
Como siempre EXCELENTE TUTORIAL , Grxs por tus clases, Dios te bendiga
el mejor explicado y mas claro. Gracias, gracias y mil gracias
Super bueno excelente trabajo desde Colombia me haz ayudado mucho. :))))
Gracias por este video, estoy empezando con javascript y veo que está muy bien explicado.
para los que no les sale tienen que descargarse la libreria jquery o linkearlo , me funciono el primero
Como siempre, ¡MAGISTRAL TU CLASE!. Muchas gracias
Muchas gracias por el esfuerzo que haces para realizar los vídeos que son excelentes.
Muy buen video y excelente trabajo espero que sigas realizando mas Videotutoriales, gracias!
Que buen Tutorial, Saludos desde el Japon
buenas noches amigo excelente manera de explicar y fantastico la manera de hacer sencillo las cosas, por casualidad tu no trabajas con odoo, en la creacion de modulos
ohh que excelente vídeo, al igual que todos !
Hermano, me agrada tu forma, siempre utilizando código nativo. Sin framework ni nada de esas cosas. Siempre recurro a tus videos buscando ayuda, en muchas oportunidades he decicido por tu solución ya que está viene sin pluggins ni nada de esas cosas raras que andan por ahy.
Buen video, pero me surgió una, ¿se puede hacer eso mismo con un , y que además sea en una fracción de la pantalla (como de la mitad de la derecha por ejemplo)?
Minuto 12:24 te salio el Dejo De Charapa jejej Solo una curiosidad nada personal buen canal amigo emprendo mucho con tu canal graciasss
gracias amigo , justo lo que buscaba :D
Hola Bro :)
Gracias me has salvado. Abrazo fuerte desde Colombia. (y)
Muy bueno, yo estoy a favor del JavaScript puro, aunque estoy aprendiendo, me he dado cuenta que muchas personas ni se preocupan por aprender JS puro sino que de una se van a jquery sin entender el lenguaje puro y lo que hacen es llamar y llamar funciones sin saber qué está pasando detrás de eso. así que por ahora, mientras aprendo, prefiero enfrentarme a JS en su más puro estado. Aclaro que no me parece que jquery esté mal, solo en la situación que yo describo no me parece empezar de frente con jquery.
defiendo tu comentario, lo negativo para mi de Jquery es que es muy pesado y afecta en la carga de velocidad de cualquier web o blog, en cambio si sabes JavaScripts desde su base puedes hacer aplicaciones (funciones) muy ligeras y bastante optimizadas.
Es sumamente pesado, alguien vio la propuesta vanilla javascript jajaja muy bueno, es un poco de humor, pero francamente defiendo emascript y lo mas fiel a dicho estandar que es js en estado PURO PURO !
Ola! mais um excelente vídeo. encontrei muitos vídeos com menu fixo mas sem logo.
Obrigado por compartilhar seus conhecimentos.
Toma tu like numero 200
Jeancarlos, de antemano gracias, sí se puede, que debo hacer para aplicar una segunda clase a un segundo elemento al mismo tiempo; por ejemplo tambien hacer fixed al div logo( en este caso h1), cambiar de color o hacerlo mas alto, ya que yo tengo tres elementos y quiero que dos de ellos se modifiquen al mismo tiempo (cuando se cumpla la condición de la altura). Saludos desde México
Muy buen video, gracias!
buen video me gusto mucho gracias mi bro tu tienes un curso de javascript ?
Eres de los mejores colega! :D
excelente trabajo!!! gracias
Tremendo vídeo gran aporte , 👍
Muy buena explicación.
¡Muchas gracias! Me funciono totalmente.
Primero :D saludos amigo
sos un groso !!
Hola cordial saludo
Muy buenos los tutoriales he aplicado varios a mis trabajos.
Hay opcion de hacer que se oculte el el menú al bajar el scroll y aparecer el menú al subir el scroll sin importar la distancia del scroll. Que sea en cualquier parte al bajar o subir. Ejemplo como el del whatssap.
Gracias
+jhony alexander gonzalez cordoba si, controlando los eventos al hacer scroll.
Está bien, pero cuando el menú se vuelve fixed entonces deja de ocupar un espacio, por lo tanto, todo el contenido de abajo se mueve hacía arriba de manera súbita, para ocupar el espacio en donde estaba el menú, ¿hay alguna manera de que eso no ocurra?¿de qué rl contenido no se recorra, supongo que será con javascript.
MUY PERO MUY BUENO, GRACIAS COMO SIEMPRE
Excelente video la verdad es que explicas muy bien quisiera saber si puedes ayudarme o sacarme de dudas diseñe un menu responsive basado en uno de tus videos pero cuando trato de adaptar el sticky se me hace imposible por ejemplo la funcion offsettop para medir la distancia me sale undefined y no logro colocarlo como fixed sin que se me desordene el boton :c
amigo muchas gracias
Hola amigo quisiera saber si hay alguna forma de cambiar el color o ponerle un mejor diseño al scroll.
Muy buen vídeo. Gracias
buen ejemplo man, si subieras el código, sería excelente ;)
Gracias..
excelente los tutoriales.
Hola, muy bueno el tutorial, el único problema que tengo es que cuando el nav se queda pegado, el texto que le sigue se pone abajo del nav, en el video pasa lo mismo también, como se puede hacer para solucionarlo? Gracias.
en el 2021 gracias
Hola, tengo una duda, se puede hacer eso con una imagen, es decir; el menú este unido a la imagen y cuando se baja solo baja el menú con ese efecto?? se puede??
hola lo palique en un form y funciona bien, pero quisiera detenerlo a cierta altura antes de llegar al footer como puedo lograrlo?
pana lo amo! ♥ gracias
excelente video
ayuda porfavor disculpas. no se porque no me corre ningun javascript. pero en mi google chrome esta activado el javascript no me corre ningun javascript..!! hise todo igual mefije que estaba bie el direcion correcta sin subcarpetas nada. simplemente no me corre nada de java script solo css. no entiendo. porque =(..!! ya m estaba golpeando la cabesa viendo porque no me funcionaba trate de muchas formas muchas. luego me di cuenta no importa que nada de javascript estaba corrindo..!! no importa que codigo simple ponga.
cony.!! pls animes donde puedo ver tu web? asi me resulta mas fácil examinar tu error
drive.google.com/open?id=0B5jRABf2OYw5dE1MOUpkY0VPVVU aki
genial, gracias :D
Buenos días, tengo un problema cuando lo reproduzco en firefox me da un error y es que el left se desconfigura a otro valor(desconozco el valor) eso pasa cuando hago scroll.
Sus vídeos particularmente son excelentes, pero tengo una duda que programa utiliza para trabajar con html?
brackets!!
Buen video joven
pero si ya tengo el menú como hago , estoy trabajando en wordpress
Hola, tengo un problema al guardar el nav en la variable menú mediante el Id me sale que está vacío "null", y no me devuelve nada después al aplicar la función offsetTop. ¿Sabes por qué pasa eso? Muchas gracias!
ayuda como ago para que mi menu tenga de fondo no un color si no una imajen?
una pregunta como uno estos tutoriales ejemplo hice el menu responsive con html y css y ahora quiero hacer este pero cuando le pongo el fixed en css y despues pongo
no pasa nada lo unico que hace es dejar sin back ground color el menu como hago para unir estos dos tutoriales :(
Muyy Buenoo!!
hermano esto n sirve en safari lo probe en Firefox y en Chrome pero porque no me sirve en Safari???
Hola me podrias dejar algun likn de agencia de viaje hecho en html5, ccs3,javascript,y jquey cnvas
No funciona para sublime verdad? La parte de javascript me tira error por todos lados.
Ilove
+J&G Proyectos Web Gracias por el tutorial me fue de mucha utilidad, ahora quisiera agregar un logo emergente en el menu sticky, me explico que cuando el menu este bien arriba no aparesca el logo, pero cuando yo haga scroll aparesca el logo. Gracias
+harold polania duque en teoría es lo mismo pero aplicando una clase que oculte al logo al hacer scroll
+J&G Proyectos Web Gracias, es que no he podido hacerlo funcionar, me podrias regalar el codigo, te lo agradeceria de antemano
+harold polania duque tienes que aprender javascript amigo de lo contrario no sabrás lo que sucedio
+harold polania duque | Yo probé con uno de lista, le modifiqué un poco y te comparto el código. Quizá puedas tomar esta idea para tu logo. Todo se basa en modificar el css poniendo display: none para ocultarlo, y display: block para mostrarlo. Revísale espero te sirva :D
codepen.io/CristopherSolis/pen/BzzqGP
Como le hago para que mi adobe brackets habra un archivo javascript(?
Esque no me deja x.X
Hola amigo. no puedo combinar este tutorial con el de menú responsive.
le hice a mi web el menú responsive que explicas en otro video (th-cam.com/video/nOjxVmN-obU/w-d-xo.html) y ahora quiero agregarle una barra superior para incorporar un texto pero que cuando haga scroll desaparezca, intenté mezclarlo con este tutorial y se me complica. Como sugerencia estaría bueno que los tutoriales que haces estén relacionados entre sí para poder utilizarlos al máximo.
Oye una pregunta podrias explicar como hacer que mi pagina tenga todo vinculado y cuando le de click en "Nosotros" me lleve a "Nosotros" sin tener que abrir otra pagina y que ella haga scroll hasta donde este "nosotros" ?
Le pones un ID a la sección de nosotros y luego al elemento "a" en el href le pones "#nombredeID"
no me funciona no se por que ??, uso chrome , copie tal cual
hola buen dia me gustan mucho tu videos quiere que hicieras un video acerca de como hacer un banner con texto utilizando la propiedades @font- face es para un trabajo de la universidad gracias
ahora se puede usar sticky para esto en lugar de js
hola... felicidades por tu gran canal.. quiero pedirte un favor que lo necesito con urgencia.. y es como subir una web a internet.. estoy un poco condundido con el dominio y el servidor, asi que si pudiese recibir ayuda seria genial.. gracias
+Daniel Leon para ello debes tener un host y un dominio ya sea gratis o de pago, y luego desde el cpanel del host subes los archivos o puedes hacerlo por ftp, y usar un programa como fillezila
+J&G Proyectos Web es que es un trabajo de un curso.. me dice que por ftp.. pero al ingresar al filezilla me pide un servidor y un puerto.. no se cuales sean.. y si son los locales no puedo ingresar ya que el proveedor de internet no nos paso esos datos
+Daniel Leon lo que te piden son los datos del servidor, prueba con hostinger hostgator hay tantos en Internet busca host gratuitos y una vez que tengas un host y un dominio busca los datos del ftp
+J&G Proyectos Web vale.. muchas gracias.. de verdad que buen canal.. me has ayudado mucho a lo largo del curso..
No habra forma sin utilizar nada de javascript?
En este caso no, porque el scroll se maneja con Javascript
He realizado uno igual, si les interesa , hagan click a esta imagen 😉.
quinto video y sigue sin funcionarme...
Hey profe :D por favor ayudame.. Eh in tentado muchas veces pero no me sale.. hasta el css todo bien. Cuando ya llego a los archivos js, no me sale nada.. por más que sigo todos los pasos y nada.. Por favor.. necesito ayuda.. Gracias..
Estas poniendo el en la parte de arriba de tu documento, debes ponerla como en el video, antes de la etiqueta de cierre
Exacto sale colocando el script del js antes del /body, mi pregunta es pq no sale cuando lo coloco en head con el jquery debajo. Gracias
+Sergio A Chalco Alfaro porque si pones un script antes que cargue el html, no puede modificar nada porque no existe el html, en cambio, si lo pones al final funciona, porque ya se dibujó el HTML. Averigua sobre el DOM
Tenia el mismo problema. Muchas gracias!!