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