I am trying to implement a sticky header row for table, but need to do it without position: sticky property.

The approach I am going for is translating Y coordinate of header row along with document vertical scroll by same amount of pixels.

As the document is scrolled down, we translate the header row downwards by same number of pixels giving the effect that header row is stuck at the top of table.

I have a working implementation at https://codepen.io/shubham_687/pen/porPwbP

PFA the gist of implementation below

  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);"
      );
    }
 };

The issue I am facing is that the implementation is jerky/sluggish/jumpy in some browsers and mobile devices while working perfectly fine in some (Google chrome).

As per my understanding, this behavior might be because of the following reason(s)

1. Large number of scroll events per second causing perf impact, might be possible to solve using debouncing, any suggestions?

2. Updating css dynamically leads to update layer tree which takes some time as well and the number of times this gets called is directly proportional to the times scroll event is registered.

Please share possible suggestions for perf improvement.