angular-sticky | Pure javascript AngularJS directive to make | Script Programming library

I am working on a medium-sized project where we need to display some information in a complex table. The headers need to be sticky, so that when you scroll down the page, the header sticks to the top of the table.

As I want to support IE and earlier versions of Chrome, I DO NOT want to be using the position: sticky;. I do not mind it involving a bit of JS, as my previous attempts for this has also included that.

I've already gone the way, of simply making doing this by JS and making the position: fixed; when the user scrolled further down that the table header. Yet also this seems to have the same trouble as illustrated in the stackblitz further down. This makes me consider that it might have something with the sizing I'm not getting right.

I've looked a bit into the using of Angular Sticky Things. I just can wrap my head around how to use this library in the given context:

I have a Stackblitz with example usage of this.

I would love if someone could give me a hint as to how on earth, this should be made.

I expect that the whole thead moves down, without scaling itself or scaling the rest of the table!