2

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

界面概念草图

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

  • <header>位置：固定；
  • <nav>位置：粘性（使用 polyfill）
  • <section class="content box">--- 真的不知道

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

研究了很多选项，并认为我在 webkit-mask-attachment 中找到了解决方案，但该属性已被删除。

欢迎任何帮助。我更喜欢必须响应式工作的纯 CSS 解决方案。

干杯，巴特！

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

更新 1

我正在做某事。仅在我使用 position: sticky 并且没有打扰它时才在 Firefox 中工作。它在您滚动时起作用....但是如果您向下滚动并等待几秒钟，则某些东西会重新定位或重新绘制，并且红色标题会再次完全显示。

知道为什么会这样吗？

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

4

1 回答 1

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 以来还没有做过任何严肃的 FED，所以我为自己感到骄傲，放轻松 :)

于 2015-07-18T11:36:01.477 回答