The table virtual scroll breaks the sticky header and footer

[benfeather]

I'm submitting a ... (check one with "x")

[ x ] bug report => Search github for a similar issue or PR before submitting
[   ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[   ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
https://stackblitz.com/edit/github-soeffn

Current behaviour
When using the virtual scroll feature, the sticky header and footer don't work as expected.
The header jumps and the footer disappears when scrolling.

Expected behaviour
The second table in the demo project above is using the regular scroll, as you can see the sticky header/footer remain in place and the header no longer "jumps" when scrolling.

What is the motivation/use case for changing the behaviour?
We have large tables with 10000+ rows so we use the virtual scroll feature to improve the table's performance. However, we need a sticky header for useability and the sticky footer is used for column statistics e.g. min/avg/max etc.

Angular version:
Tested with Angular 12.0.5 and 13.0.2

PrimeNG version:
The issue started with PrimeNG version 12.1.0 and is still present in version 13.
Version 12.0.2 does not have this issue.

Browser:
I have tested with Chrome version 96

[yigitfindikli]

Duplicate of #10630