Estoy tratando de implementar una fila de encabezado fija para la tabla, pero necesito hacerlo sin posición: propiedad fija.
El enfoque que busco es traducir la coordenada Y de la fila del encabezado junto con el desplazamiento vertical del documento en la misma cantidad de píxeles.
A medida que el documento se desplaza hacia abajo, trasladamos la fila del encabezado hacia abajo en la misma cantidad de píxeles, lo que da el efecto de que la fila del encabezado se atasca en la parte superior de la tabla.
Tengo una implementación funcional en https://codepen.io/shubham_687/pen/porPwbP
PFA la esencia de la implementación a continuación
canvas.onscroll = function (e) { if (canvas.scrollTop >= rect.top) { const numOfPixels = canvas.scrollTop - rect.top; element.setAttribute( "style", "transition:0s;transform: translate3d(0px," + numOfPixels + "px, 0px);" ); } else { element.setAttribute( "style", "transition:0s;transform: translate3d(0px, 0px, 0px);" ); } };El problema al que me enfrento es que la implementación es desigual, lenta o nerviosa en algunos navegadores y dispositivos móviles, mientras que funciona perfectamente bien en algunos (Google Chrome).
Según tengo entendido, este comportamiento podría deberse a la(s) siguiente(s) razón(es)
Una gran cantidad de eventos de desplazamiento por segundo que causan un impacto en el rendimiento, podría resolverse mediante la eliminación de rebotes, ¿alguna sugerencia?
Actualizar css dinámicamente conduce a actualizar el árbol de capas, lo que también lleva algo de tiempo y la cantidad de veces que se llama es directamente proporcional a las veces que se registra el evento de desplazamiento.
Comparta posibles sugerencias para mejorar el rendimiento.