固定剪辑路径或蒙版的位置

问题描述

我有这个界面的概念，我只是不知道是否可能。

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.

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

I think I know how to accomplish some behaviour:

• < header> position：fixed;


• < nav> position：sticky（with a polyfill）


• < section class =content box>

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

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

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.

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

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

欢迎任何帮助。我更喜欢一个纯CSS解决方案，必须做出响应。

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

干杯，
Bart！

Cheers,Bart!

PS。我想到一个javascript解决方案，我监控滚动偏移量和更改类< header> 其中我设置一个高度和overflow：hidden。但我真的会喜欢它，如果有一个CSS解决方案。

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.

东西。在Firefox中工作，因为我使用位置：粘性，没有打扰polyfilling。它工作时，你滚动....但如果你向下滚动，等待几秒钟，不知何故，东西被重新定位或重绘，红色标题再次显示。

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?

在Firefox上试用这支笔：

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

推荐答案

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

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

svg { display: none; }

现在无论如何当滚动这没关系。但是当滚动css规则时，为了隐藏svg对象，我将规则更改为：

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;
}

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

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

在Firefox上试用这个更新的笔：

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

没有自XHTML以来我做了任何严重的FED，所以我为自己感到自豪，对我很容易：）

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

这篇关于固定剪辑路径或蒙版的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！