Question

我正在尝试使用带有视差屏幕的网页，并在顶部导航栏。我已经尝试了，我知道的一切，我无法让它工作。

Answer 1

问题是由透视引起的：1px;在身体里。删除该行和位置：固定有效，但删除透视：1px打破你的视差。任何变换css都会导致position：fixed恢复到position：relative。

这是对位置的影响：固定是否必要？如果是这样，需要进入这里有更多细节关于为什么固定定位物体应该这样做，也就是说，否则实施起来要困难得多。请参阅错误16328. https://www.w3.org/TR/css-transforms-1/#perspective-property

而不是将透视：1px放在影响一切的体内，你可以将它放在这样的包装div中：

 <div style="scrolling-content">
     ... the bits that scrolls...
 </div>

和css ......

 .scrolling-content {
      width: 100vw;
      height: calc(100vh - 70px);
      overflow-y: scroll;
      overflow-x: hidden;
      perspective: 1px;
      margin-top: 70px;
 }

70px是导航栏的高度（包括填充）。

同时设置正文

body {
     scroll-x:hidden; 
     scroll-y:hidden;
}

Answer 2

问题是身体样式上的overflow-y选项。

您可以执行以下操作：

在一个单独的div中用class =“section”包装两个div，如下所示：

<div id="example">
  <div id="title" class="section header">
    <h1>Test</h1>
  </div>

  <div id="section1" class="section">
    <div class='text'>
      <p>test</p>
    </div>
  </div>
</div>

然后从正文中删除溢出选项并将它们放在#example的样式中，如下所示：

#example {
  height:100%;
  overflow-y: scroll;
  overflow-x: hidden;
  perspective:1px;
}

固定的和绝对的

2 个答案: