修复剪辑路径或蒙版的位置

Question

我有这个界面概念，我只是不知道它是否可能。它有点难以解释，所以我勾勒出来了。

我想我知道如何完成某些行为：

• <header>职位：已修复;
• <nav>位置：粘性（使用polyfill）
• <section class="content box"> ---真不知道

我希望有一种方法可以将剪辑路径添加到我可以定位的内容框中：修复。因此，当用户滚动内容框时，将窥视由剪辑路径定义的区域。

查看了一些选项，并认为我在webkit-mask-attachment中找到了一个解决方案，但该属性已被破坏。

欢迎任何帮助。我更喜欢纯粹的CSS解决方案，它必须以相应的方式工作。

干杯， 巴特！

PS。我想到了一个javascript解决方案，我监视滚动偏移并更改<header>的类，其中我设置了一个高度和溢出：隐藏。但如果有一个CSS解决方案，我真的更喜欢它。

更新1

我正在做些什么。在Firefox中工作只是因为我使用的位置：粘性并且避免了填充它。滚动时它会起作用....但是如果向下滚动并等待几秒钟，某些东西会被重新定位或重新绘制，并且红色标题会再次显示。

知道为什么会这样吗？

在Firefox上试用这支笔：http://codepen.io/anon/pen/GJBxYw

Answer 1

啊，发现了！奇怪的行为。为了隐藏svg对象，我将svg的css属性设置为：

svg { display: none; }

现在以某种方式滚动这并不重要。但是当你滚动css规则时就会启动。所以为了隐藏svg对象，我将规则更改为：

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

这似乎有效。不知道是否有更好的方法来隐藏svg对象？

在Firefox上试用这个更新的笔：http://codepen.io/anon/pen/GJBxYw

自XHTML以来没有做过任何严肃的美联储，所以我为自己感到骄傲，对我很轻松：）