StudyInk
El reto principal
Un encabezado que cambia de altura mientras haces scroll es una trampa de rendimiento: cada cambio de altura recalcula el layout de toda la página, y hacerlo en el evento scroll significa hacerlo decenas de veces por segundo.
La primera versión escuchaba scroll y leía scrollY en cada evento: eso fuerza al navegador a recalcular el layout en medio del scroll y se notaba a simple vista. Sustituirlo por un IntersectionObserver sobre un elemento centinela invisible al inicio de la página dejó al navegador avisando solo en la transición, en vez de yo preguntando en cada frame.
Qué aprendí
Casi todo lo que se escucha con el evento scroll se resuelve mejor con IntersectionObserver. El patrón del centinela —un div vacío que marca un umbral— sirve para encabezados, botones flotantes y carga progresiva.
- Leer
scrollYdentro descrollfuerza recálculo de layout: es el clásico layout thrashing - Animar
heightcuesta caro; animartransformypaddingcon moderación cuesta mucho menos - Un centinela invisible es más barato y más preciso que un umbral en píxeles a mano
- JavaScript
- CSS
- HTML