Para empezar a hacer este efecto de formato sticky o también conocido como
menú pegajoso, consiste en que la momento de hacer el scroll el menú se
quede completamente pegado a la página.
Lo primero que debemos hacer es crear nuestra estructura html de nuestra
página:
Lo que he hecho simplemente es colocar crear carpetas con el css, js, donde he
creado link, para llamar el css, y los script para llamar el js, dentro del header
he creado un div donde contendrá todo el nav, y otro div que contendrá mi
texto alternativo Lorem.
En mi css he creado que el contenedor tenga un ancho del 95% y un máximo
de 1000px y le he dado un margin auto , y al nav y las listas le he dado colores
de fondo y quitarle los link por defecto que tiene, aquí toda la magia lo hace la
parte del js, llamando el .menu-fixed como veras a continuación:
La parte del js viene a continuación:
Esto simplemente esta indicando que crearemos una variable altura y de la
clase menú que le pusimos en el nav vea la altura que tiene, y cuando el
usuario le de scroll comprueba que el srcoll sea mayor a la altura y quite la
clase menu y agregre la clase menu-fixed creada anteriormente en el css.
Visita mi canal de YouTube:
Link de descarga:https://www.youtube.com/channel/UCFeJphiL1eubtbBmH5oN7zQ
Comentarios
Publicar un comentario