En este video vamos a utilizar QWERTY para hacer un tracking de en qué parte de nuestro sitio web nos
encontramos.
Por ejemplo yo quiero que cuando demos scroll los colores Krol esta parte de la barra quede fija y arriba
y podría seguir dando scroll y la barra sigue fija en la parte superior que es un efecto muy común hoy
en día y vamos a ver cómo hacerlo con Cuadri y vamos a ponerlo aquí y después ponemos aquí un menú fijo.
Y con Yekuana puedes hacerle como dije identificar en qué posición se encuentra el usuario en el sitio
web en base a los pixeles que ha hecho scroll vamos por ejemplo aquí a crear un método de decir window
scroll.
Así que por lo tanto esto va a estar escuchando por los Scroll que le hagamos a la ventana y luego le
ponemos aquí la función de ejecutar una función importante.
Aquí le damos por ejemplo para scroll igual a window punto de scroll top.
Muchos de los errores cuando este tipo de código se quieren implementar es porque no se agrega esta
línea scroll top es la que nos va a ayudar a detectar el scrolling.
A pesar de que haga scroll esto es la que en realidad hace todo el trabajo de aquí Consol log scroll
y vemos que estamos obteniendo vamos a inspeccionar y recargar y aquí en consola y empezamos a dar scroll
y podemos ver muchos números y esas son la cantidad de pixeles a la que le estamos haciendo scroll y
si lo ve para arriba puedes ver que el número empieza a ser menor y si lo de abajo es mayor así podemos
ver que nuestra página web son más de 8000 píxeles hacia abajo
pero cómo saber exactamente cuánto mide nuestra página como para identificar que la barra de atorarse
ahí sí como una pregunta un tanto complicada pero con Chicuelo y puedes saber la medida de la ventana
de la ventana gráfica y eso lo puedes hacer con por ejemplo creando una variable que se llame window
Jaitt o la altura de la ventana que sea igual a window apuntó Jaitt y esto es un método que nos va a
decidir la altura de la ventana así que la puedo dar aquí con sólo window joi y esto me va a decir exactamente
cuánto mide la ventana de aquí abajo a arriba puedes ver que si le doy así como lo recorro y lo recargo
ahora dice 677 píxeles si lo veo un poco más abajo recargo que es 835 píxeles
este valor puedes ignorarlo procesal en dos que vemos que es 835 si luego másgrande 915 si lo hago más
pequeño
338 y de esa forma podemos saber cuánto mide la página web
también tenemos nuestra barra aquí.
También nos gustaría saber cuánto mide esa barra para hacer nuestro cálculo matemático y por ejemplo
esta barra podemos ver que mide 94 pixeles de altura sin embargo si le hago un poco más pequeña y se
pone así en dos líneas vemos que Killa mide 142.
Es muy difícil saber exactamente cuánto va a medir salvo que nosotros con CSS le demos una altura fija
pero no es lo que quiero hacer.
Vamos a ponerle esquivar barra altura igual a seleccionamos con QR barra y le ponemos punto y energía.
Y lo podemos ver aquí con sólo barra altura para saber cuánto mide la barra y lo puedo quitar.
Ya vimos que es lo que hace recargo vemos que quien nos dice que mide 142 pixeles y si lo doy Recaro
aquí es 93 lo mismo que obtenemos aquí qué le pasa es un truco y recargo.
Vemos que aquí cambia un poco.
Si doy click aquí en algún lugar vas a encontrar la altura y va a ser una altura un poco diferente aquí
puedes ver que ese offset Jaitt es igual el caballero geoide hay distintas formas de identificar por
ejemplo la altura con o sin el Padín y el margen y aquí todo esto te va a dar muchísima información
para identificarlo.
Sin embargo en nuestro ejemplo nosotros ocupamos la altura completas y que lo vamos a dejar así sin
el True ya tenemos cuánto mide la ventana ya tenemos cuánto mide la barra ya tenemos cuántos crowding
estamos haciendo en el siguiente video estaremos agregando poniendo junto todo esto para agregar esta
funcionalidad a nuestro sitio web.