我正在尝试实现一个固定的标题和视差效果,它似乎在 Chrome 中有效,但在 Firefox 中无效。
对于视差,我尝试使用以下两种解决方案:
当使用第一个解决方案时,视差本身在 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中查看.
你能帮我看看哪里出了问题吗?
最佳答案
您需要将边距顶部添加到 ParallaxContainer
,因为您已经修复了该 header ,因此 header 将不会停留在该位置。
.ParallaxContainer {
margin-top: 10vh;
}
关于html - Firefox 上带有固定 header 的 CSS 视差,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55620611/