修复 clip-path 或掩码的位置
Fix the position of a clip-path or mask
我有这个界面概念，只是不知道是否可行。有点难解释所以我画了个草图。
我想我知道如何完成某些行为：
<header>位置：固定；<nav> 位置：粘性（使用 polyfill）<section class="content box"> --- 真的不知道
我希望有某种方法可以将 clip-path 添加到我可以定位的内容框中：已修复。因此，当用户滚动内容框时，内容框将窥视由 clip-path 定义的区域。
研究了很多选项，并认为我在 webkit-mask-attachment 中找到了解决方案，但 属性 已被破坏。
欢迎任何帮助。我更喜欢必须响应式工作的纯 CSS 解决方案。
干杯，
巴特！
PS。我想到了一个 javascript 解决方案，我在其中监视滚动偏移并更改 <header> 的 class，我在其中设置了高度和溢出：隐藏。但如果有 CSS 解决方案，我真的会更喜欢它。
更新 1
我正在做某事。只在 Firefox 中工作，因为我使用的是 position: sticky 并且没有为它进行 polyfilling。当你滚动时它会工作......但是如果你向下滚动并等待几秒钟，东西会以某种方式重新定位或重新绘制并且红色 header 再次完全显示。
知道为什么会这样吗？
在 Firefox 上试试这支笔：http://codepen.io/anon/pen/GJBxYw
啊，找到了！奇怪的行为。为了隐藏 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 以来就没有做过任何正式的 FED，所以我为自己感到骄傲，对我放轻松 :)
我有这个界面概念，只是不知道是否可行。有点难解释所以我画了个草图。
我想我知道如何完成某些行为：
<header>位置：固定；<nav>位置：粘性（使用 polyfill）<section class="content box">--- 真的不知道
我希望有某种方法可以将 clip-path 添加到我可以定位的内容框中：已修复。因此，当用户滚动内容框时，内容框将窥视由 clip-path 定义的区域。
研究了很多选项，并认为我在 webkit-mask-attachment 中找到了解决方案，但 属性 已被破坏。
欢迎任何帮助。我更喜欢必须响应式工作的纯 CSS 解决方案。
干杯， 巴特！
PS。我想到了一个 javascript 解决方案，我在其中监视滚动偏移并更改 <header> 的 class，我在其中设置了高度和溢出：隐藏。但如果有 CSS 解决方案，我真的会更喜欢它。
更新 1
我正在做某事。只在 Firefox 中工作，因为我使用的是 position: sticky 并且没有为它进行 polyfilling。当你滚动时它会工作......但是如果你向下滚动并等待几秒钟，东西会以某种方式重新定位或重新绘制并且红色 header 再次完全显示。
知道为什么会这样吗？
在 Firefox 上试试这支笔：http://codepen.io/anon/pen/GJBxYw
啊，找到了！奇怪的行为。为了隐藏 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 以来就没有做过任何正式的 FED，所以我为自己感到骄傲，对我放轻松 :)