Subsequent stickyThing causes headers to "sticky" further than they should

[Stevie Starosciak]

Hey there, I'm using Angular 10 and one thing I've noticed is that I have multiple sticky headers setup, as I scroll down the page, each header "stickies" further down its container, instead of right at the top. If I have only a single sticky header on the page, it works fine, but if I have five, this problem seems to happen.

Each is setup similar to this:

<div class="table" #boundary>
                <div #spacer></div>
                <div class="flex-grid" 
                    stickyThing 
                    (stickyStatus)="handleStickyStatus($event)"
                    [spacer]="spacer" 
                    [boundary]="boundary">
                </div>
</div>

I'm not sure if there is some additional setup that I have forgotten but I've been tinkering with different things and can't seem to crack it. Has anyone else run into this issue?

Thanks in advance!