1 00:00:00,940 --> 00:00:07,510 Para hacer esto la verdad lo único que tenemos que hacer es una pequeña validación es muy sencilla y 2 00:00:07,510 --> 00:00:10,690 vamos a agregar una clase de CSS. 3 00:00:10,690 --> 00:00:17,650 Primero vamos a hacer lo que viene siendo la validación aquí nada más tenemos que crearon DIV Unibe 4 00:00:18,650 --> 00:00:27,980 que va a decirnos por ejemplo si el scroll la cantidad de scroll que estamos haciendo es mayor que la 5 00:00:27,980 --> 00:00:38,650 altura de la ventana Quiero que Ejecútese esto si no quiero que ejecutes esto y tal vez diga así y vamos 6 00:00:38,650 --> 00:00:39,450 a ejecutar. 7 00:00:39,450 --> 00:00:51,390 Bueno vamos primero a mostrar aquí con su blog ya rechazaste la altura de la pantalla y lo podemos ver 8 00:00:51,430 --> 00:00:55,690 aquí con su blog aún no 9 00:00:58,740 --> 00:01:07,170 guardamos cambios y recargamos aquí inspeccionar consola y vemos que hice algo de scroll y quizá aún 10 00:01:07,190 --> 00:01:16,280 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 11 00:01:16,280 --> 00:01:23,980 rebasado el punto es donde yo quiero que esta barra le podamos agregar el efecto que yo quiero que sea 12 00:01:24,030 --> 00:01:25,080 el efecto deseado. 13 00:01:27,250 --> 00:01:35,070 Una vez que lo revisemos yo quiero ponerlo aquí barra y la vamos a agregar una clase que en este caso 14 00:01:35,070 --> 00:01:37,770 se llama fixed y aún no hemos creado esa clase. 15 00:01:37,770 --> 00:01:46,160 Sin embargo quiero ver que funcione recargo y coloco aquí inspeccion esta barra empieza a darle scroll 16 00:01:46,780 --> 00:01:53,480 y vemos que dice Aquí barra fixed y si lo hay por arriba vemos que la barra fixed sigue ahí. 17 00:01:53,480 --> 00:01:55,700 Por lo tanto vamos a quitarla. 18 00:01:55,760 --> 00:02:04,010 Copio y pego y Podemos aquí remó Class así que recargó de nuevo y me pongo aquí lo selecciono. 19 00:02:04,250 --> 00:02:09,850 Vemos que dice nada más div class barra y si le doy un poco de scroll dice div class barra fixed. 20 00:02:10,100 --> 00:02:19,310 Y si vuelvo hacia arriba vemos que desaparece la clase falta crear esa clase y vamos a ir al main scroll 21 00:02:19,310 --> 00:02:24,410 hacia arriba buscar la barra y aquí vamos a poner. 22 00:02:24,590 --> 00:02:33,860 Fixed y los atributos o los valores para fixes vamos a poner aquí posición fixed que no lo habíamos 23 00:02:33,860 --> 00:02:40,440 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 24 00:02:42,140 --> 00:02:49,200 le ponemos un Huid del 100 por ciento porque al ponerle el fixed ya cambia el ancho ponemos un top cero 25 00:02:50,740 --> 00:02:53,610 y un leve cero para que empiece desde esta esquina. 26 00:02:54,730 --> 00:02:57,990 Anotarle recargar ya vamos a darle un poco. 27 00:02:59,550 --> 00:03:02,590 Y llegado a este punto puedes ver que se queda en posición fija. 28 00:03:04,040 --> 00:03:13,320 Y ahí como que desaparece no para eso vamos a utilizar Zeta índex y 2 recargo y vemos que ya no desaparece 29 00:03:14,240 --> 00:03:20,090 y puedes ver que se queda la barra en posición fija en la parte superior y una vez llegado a este punto 30 00:03:20,090 --> 00:03:26,860 vemos como le quita la clase de fixes y se queda ahí mismo sin embargo puedes ver que cuando llegó aquí 31 00:03:26,860 --> 00:03:32,330 se ve este brinco y eso pasa porque la barra mide. 32 00:03:32,920 --> 00:03:34,980 En este caso 93 pixeles. 33 00:03:35,170 --> 00:03:42,250 Llegado a este punto se ponen iFixit y esos 93 pixeles que desaparecen se pone como encima desaparecen 34 00:03:42,290 --> 00:03:49,410 entonces tendremos que hacer algo aquí en nuestro Moine punto J.V para hacerlo más dinámico. 35 00:03:49,410 --> 00:03:52,980 Vamos a aquí despuésdel. 36 00:03:52,980 --> 00:04:01,440 Fixed ponerle Bodhi lo vamos a agregar un poco de Marina Bay y ponemos CSS para modificar el CSS y lo 37 00:04:01,440 --> 00:04:10,770 ponemos entre comillas margin top 2.6 y lo vamos a poner a la altura de la barra barra altura y lo que 38 00:04:10,770 --> 00:04:12,870 mide la barra les ponemos píxeles 39 00:04:16,700 --> 00:04:22,800 guardó cambios recargo y doy un poco de scroll y vemos que ya no se ve ese brinco. 40 00:04:22,800 --> 00:04:28,350 Sin embargo cuando vuelvo así para cuando le doy de aquí para abajo vemos que ya no lo hace pero cuando 41 00:04:28,350 --> 00:04:33,540 vuelvo de abajo para arriba vemos que brinca y es porque no le hemos quitado el margen top. 42 00:04:33,540 --> 00:04:44,130 Podemos ir aquí y ponerle selector del body Body CSS abrir llaves y abrir paréntesis y llaves y ponerle 43 00:04:44,130 --> 00:04:47,690 margin top 0 píxeles. 44 00:04:47,700 --> 00:04:54,890 En este caso guardar cambios y recargo y vamos a ver desde arriba vemos que se ve en nuestra página 45 00:04:54,890 --> 00:05:00,920 web el scroll y una vez llegado a este punto vemos como se atora y no vemos ya el brinco que daba esta 46 00:05:00,920 --> 00:05:07,580 parte y al darle scroll hacia arriba vemos como se quita también ese scroll y ya puedo dar scroll por 47 00:05:07,580 --> 00:05:17,150 toda la página web y ver cómo nuestro Gebser se mantiene durante todo el sitio web visible 48 00:05:21,580 --> 00:05:27,480 así que este es otro ejemplo de algo de lo que puede ser Kontxi QWERTY hay algo que nos hemos perdido 49 00:05:27,660 --> 00:05:33,380 de hacer y es crear nuestro menú responsivo sin scroll vemos que se queda este menú. 50 00:05:33,420 --> 00:05:40,260 Ya sabemos cómo trabajar con un click así que vamos a trabajar con esta parte para hacer nuestro menú 51 00:05:40,680 --> 00:05:41,420 responsivo.