How to make thead fixed in the table on scroll?

Question

css

Example.
The table is located in the content zone, it is necessary to fix it when scrolling when thead touches the upper border of the browser and then remove the fix when the table ends.
It should also work on IOS in Safari (and in all mobile browsers), it is there that problems often arise, but even on the desktop nothing happens here.
I have already tried all the known methods and plugins, I look forward to advice and help.