html - Firefox 上带有固定 header 的 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 类的样式.
固定 header 和视差效果在 Chrome 中运行良好，但在 Firefox 中则不然。

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

你能帮我看看哪里出了问题吗？

Answer 1

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

.ParallaxContainer {
    margin-top: 10vh;
}