Question

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

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

我无法弄清楚如何在不破坏视差效果的情况下订购我的div并保持滚动条不会表现得很奇怪。

目前我在＆＃34; et-main-area＆＃34;中有视差内容。但那不包括导航栏。如果我移动视差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);
}

Answer 1

如果你这样做：

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

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

移动div所以它包括我的标题栏

1 个答案: