Para hacer esto la verdad lo único que tenemos que hacer es una pequeña validación es muy sencilla y
vamos a agregar una clase de CSS.
Primero vamos a hacer lo que viene siendo la validación aquí nada más tenemos que crearon DIV Unibe
que va a decirnos por ejemplo si el scroll la cantidad de scroll que estamos haciendo es mayor que la
altura de la ventana Quiero que Ejecútese esto si no quiero que ejecutes esto y tal vez diga así y vamos
a ejecutar.
Bueno vamos primero a mostrar aquí con su blog ya rechazaste la altura de la pantalla y lo podemos ver
aquí con su blog aún no
guardamos cambios y recargamos aquí inspeccionar consola y vemos que hice algo de scroll y quizá aún
no no no no. Aún no aún no he llegado a este punto ya rebasa hasta la altura de la pantalla así que
rebasado el punto es donde yo quiero que esta barra le podamos agregar el efecto que yo quiero que sea
el efecto deseado.
Una vez que lo revisemos yo quiero ponerlo aquí barra y la vamos a agregar una clase que en este caso
se llama fixed y aún no hemos creado esa clase.
Sin embargo quiero ver que funcione recargo y coloco aquí inspeccion esta barra empieza a darle scroll
y vemos que dice Aquí barra fixed y si lo hay por arriba vemos que la barra fixed sigue ahí.
Por lo tanto vamos a quitarla.
Copio y pego y Podemos aquí remó Class así que recargó de nuevo y me pongo aquí lo selecciono.
Vemos que dice nada más div class barra y si le doy un poco de scroll dice div class barra fixed.
Y si vuelvo hacia arriba vemos que desaparece la clase falta crear esa clase y vamos a ir al main scroll
hacia arriba buscar la barra y aquí vamos a poner.
Fixed y los atributos o los valores para fixes vamos a poner aquí posición fixed que no lo habíamos
visto en el curso sin embargo posición fixed lo va a dejar en una posición fija que ahí no se va a mover
le ponemos un Huid del 100 por ciento porque al ponerle el fixed ya cambia el ancho ponemos un top cero
y un leve cero para que empiece desde esta esquina.
Anotarle recargar ya vamos a darle un poco.
Y llegado a este punto puedes ver que se queda en posición fija.
Y ahí como que desaparece no para eso vamos a utilizar Zeta índex y 2 recargo y vemos que ya no desaparece
y puedes ver que se queda la barra en posición fija en la parte superior y una vez llegado a este punto
vemos como le quita la clase de fixes y se queda ahí mismo sin embargo puedes ver que cuando llegó aquí
se ve este brinco y eso pasa porque la barra mide.
En este caso 93 pixeles.
Llegado a este punto se ponen iFixit y esos 93 pixeles que desaparecen se pone como encima desaparecen
entonces tendremos que hacer algo aquí en nuestro Moine punto J.V para hacerlo más dinámico.
Vamos a aquí despuésdel.
Fixed ponerle Bodhi lo vamos a agregar un poco de Marina Bay y ponemos CSS para modificar el CSS y lo
ponemos entre comillas margin top 2.6 y lo vamos a poner a la altura de la barra barra altura y lo que
mide la barra les ponemos píxeles
guardó cambios recargo y doy un poco de scroll y vemos que ya no se ve ese brinco.
Sin embargo cuando vuelvo así para cuando le doy de aquí para abajo vemos que ya no lo hace pero cuando
vuelvo de abajo para arriba vemos que brinca y es porque no le hemos quitado el margen top.
Podemos ir aquí y ponerle selector del body Body CSS abrir llaves y abrir paréntesis y llaves y ponerle
margin top 0 píxeles.
En este caso guardar cambios y recargo y vamos a ver desde arriba vemos que se ve en nuestra página
web el scroll y una vez llegado a este punto vemos como se atora y no vemos ya el brinco que daba esta
parte y al darle scroll hacia arriba vemos como se quita también ese scroll y ya puedo dar scroll por
toda la página web y ver cómo nuestro Gebser se mantiene durante todo el sitio web visible
así que este es otro ejemplo de algo de lo que puede ser Kontxi QWERTY hay algo que nos hemos perdido
de hacer y es crear nuestro menú responsivo sin scroll vemos que se queda este menú.
Ya sabemos cómo trabajar con un click así que vamos a trabajar con esta parte para hacer nuestro menú
responsivo.