在 Firefox 上具有固定标头的 CSS 视差

Question

我正在尝试实现一个固定的标题和视差效果，这似乎在Chrome中有效，但在Firefox上不起作用。

对于视差，我尝试使用以下 2 解决方案：

• https://www.okgrow.com/posts/css-only-parallax
• https://alligator.io/css/pure-css-parallax/

当使用第一种解决方案时，视差本身在Firefox和Chrome中工作，第二种解决方案仅在Chrome中工作。

我在 HTML 中添加了一个固定标头，例如

<div id="site-header">
<div>Header</div>
</div>
#site-header {
position: fixed; /* Fixed position - sit on top of the page */
top: 0; 
width: 100%;
height: 10vh;
}

我添加了

margin-top: 10vh;
height: 90vh;

风格到来自 https://www.okgrow.com/posts/css-only-parallax 的.MainContainer类。
固定标题和视差效果在Chrome中工作正常，但在Firefox中则不然。

请在 https://codepen.io/vikhor/pen/vMmXLR 中检查。

你能帮忙解决什么问题吗？

Answer 1

您需要将边距顶部添加到ParallaxContainer因为您已经修复了该标题，因此标题不会停留在该位置。

.ParallaxContainer {
margin-top: 10vh;
}