Data table fixed header & horizontal scroll – Angular

I’m working on a table that should have a fixed thead during page scrolling, and the table also needs to have a horizontal scroll. To achieve this, I’m cloning the thead of the table upon scrolling and adding the CSS property overflow: auto to it.

I then synchronize the horizontal scroll bar of the thead with that of the table. This way, when I scroll horizontally on the table, the thead scrolls as well. Everything is working as expected, but I discovered a bug. Please see the attached gif for reference. I can’t seem to find a way to fix it. Do you have any ideas? I’ve tried using libraries, but they are either developed in AngularJS or jQuery, and neither of those options suits my needs.

I created an angular directive called fixed.directive.ts

CODE