固定的夹路径或掩模的位置(Fix the position of a clip-path or ma

我有这个接口的概念，我只是不知道这是否是可能的。 这是有点难以解释，所以我勾勒出来。

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

• <header>位置是：固定;
• <nav>位置：粘（具有填充工具）
• <section class="content box"> ---不知道真的

我希望会有某种方式来剪辑路径添加到内容框，我的位置是：固定的。 这样当用户滚动内容框会偷看trhough这是由夹路径定义的区域。

看着颇有些选项我想我会发现，在WebKit的面罩附件的解决方案，但该财产被核爆。

任何帮助是值得欢迎的。 我喜欢它有响应工作纯CSS的解决方案。

干杯，巴特！

PS。 我已经想到一个JavaScript解决方案，其中I监视器滚动偏移量和改变类的<header> ，其中我设置的高度和溢出：隐藏。 但是，我如果有一个CSS的解决方案真的会喜欢它。

更新1

我到的东西。 在Firefox工作只因为我使用的位置是：粘，没有打扰polyfilling它。 当您滚动工程....但如果你向下滚动，等待几秒钟莫名其妙的东西被重新定位或重新绘制和红头再次完全显示。

任何想法，为什么出现这种情况？

试试在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

没有做任何严重的FED因为XHTML所以我很为自己感到骄傲，宽容我:)

文章来源: Fix the position of a clip-path or mask