css - Fix the position of a clip-path or mask -

i have interface concept , don't know if it's possible. it's kinda hard explain sketched out.

i think know how accomplish behaviour:

• <header> position: fixed;
• <nav> position: sticky (with polyfill)
• <section class="content box"> --- no idea really

i hoping there kind of way add clip-path content box position: fixed. when user scrolls content box peep trhough area defined clip-path.

looked quite options , thought i'd found solution in webkit-mask-attachment property nuked.

any welcome. prefer pure css solution has work responsively.

cheers, bart!

ps. have thought of javascript solution monitor scroll offset , change class of <header> in set height , overflow: hidden. prefer if there css solution.

update 1

i'm on something. working in firefox since i'm using position: sticky , haven't bothered polyfilling it. works when scroll.... if scroll down , wait couple of seconds somehow stuff gets repositioned or redrawn , red header shown again.

any idea why happens?

try out pen on firefox: http://codepen.io/anon/pen/gjbxyw

ah, found it! strange behaviour. in order hide svg object set css properties svg to:

svg { display: none; } 

now somehow when scrolling doesn't matter. when scroll css rule kicks in. in order hide svg object changed rule to:

svg {   position: fixed;   z-index: -1;   top: 0;   height: 0;   width: 0; } 

and seems work. don't know if there better ways go hiding svg object?

try out updated pen on firefox: http://codepen.io/anon/pen/gjbxyw

haven't done serious fed since xhtml i'm quite proud of myself, go easy on me :)