Search code examples
cssclipclip-path

Fix the position of a clip-path or mask

I have this interface concept and I just don't know if it's possible. It's kinda hard to explain so I sketched it out.

interface concept sketch

I think I know how to accomplish some behaviour:

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

I was hoping there would be some kind of way to add a clip-path to the content box that I could position: fixed. So that when the user scrolls the content box would peep trhough the area which was defined by the clip-path.

Looked into quite some options and thought I'd found a solution in webkit-mask-attachment but that property was nuked.

Any help is welcome. I prefer a pure CSS solution which has to work responsively.

Cheers, Bart!

PS. I have thought of a javascript solution where I monitor the scroll offset and change the class of <header> in which I set a height and overflow: hidden. But I really would prefer it if there was a CSS solution.

UPDATE 1

I'm on to something. Working in Firefox only since I'm using position: sticky and haven't bothered polyfilling it. It works when you scroll.... but if you scroll down and wait a couple of seconds somehow stuff gets repositioned or redrawn and the red header is shown fully again.

Any idea why this happens?

Try out this pen on Firefox: http://codepen.io/anon/pen/GJBxYw

Solution

  • Ah, found it! Strange behaviour. In order to hide the svg object I set the css properties for svg to:

    svg { display: none; }

    Now somehow when scrolling this doesn't matter. But when you scroll the css rule kicks in. So in order to hide the svg object I changed the rule to:

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

    And that seems to work. Don't know if there are better ways to go about hiding the svg object?

    Try out this updated pen on Firefox: http://codepen.io/anon/pen/GJBxYw

    Haven't done any serious FED since XHTML so I'm quite proud of myself, go easy on me :)