移动一个 div 使其包含我的标题栏



在过去的几天里,我一直在尝试创建一个视差标题,我已经非常接近了,但我还有最后一个问题要解决。包含视差标头和我的所有内容的div 不包含我的标头。这是一个问题,因为它不会与页面的其余部分一起滚动,并且看起来像我不想要的粘性标题。

你可以在这里看到我的问题: https://crispimages.co/

我不知道如何在不破坏视差效果并防止滚动条行为奇怪的同时对我的div 进行排序。

目前,我在"et-main-area"中有视差的东西,但这不包括导航栏。如果我移动视差 id,它会破坏效果。我想不通!

.HTML:

<div id="et-main-area">
<div id="parallax">
<div class="parralax__layer parallax__layer--back">
<img src="https://crispimages.co/wp-content/uploads/2018/05/layer_5.png">
</div>
<div  class="parralax__layer parallax__layer--base">
<img src="https://crispimages.co/wp-content/uploads/2018/05/layer_6.png">
</div>

.CSS:

#parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform-style: preserve-3d;
}
.parralax__layer.parallax__layer--base{
transform: translateZ(-1px) scale(2.1);
}
.parralax__layer.parallax__layer--back{
transform: translateZ(-15px) scale(16.1);
}

如果你这样做:

#parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: relative;
margin-right:-20px;
}

它将隐藏额外的滚动条并且仍然响应。这是我能找到的唯一方法来摆脱额外的滚动条,而不会弄乱任何其他样式。

最新更新