Clip/Mask/Crop/Dissappear content on scroll on top of page in fixed section

I’ve tried a lot of things but can’t find a solution to this,

Basically I want the content inside the red border to dissappear as it crosses the blue line of the header, so it’s no visible behind the blue translucent header.


even more cool if I could also clip the bottom like this, but without the scrollbar inside the red frame


I’ve tried sticky’s, overflow stuff, animations on scroll, css clip-path masking and i’ve created something like this before by making the blue header a cut from the background image, to make the content dissappear behind it, but there must be a way to achieve this and keep the backgroundimage as one piece, right?

Here is my site Read-Only: [LINK]1
(how to share your site Read-Only link)

Is my question clear? Can I do something to provide more context?