Firefox 上带有固定标题的 CSS 视差

Question

我正在尝试实现一个固定的标题和视差效果，它似乎在 Chrome 中有效，但在 Firefox 中无效。

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

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