Question

想象一下div1和div2。 div1的宽度为100％，高度为800px。 div2固定在浏览器的顶部，也有100％的宽度，可能是3000px高。我试图降落所以你看到div1但是，当你向下滚动时，div1向上滑动，显示div2及其所有内容。这似乎很容易，但我无法弄清楚。

div1 {
  width:100%;
  height: 800px;
  position: ???;
  z-index:100;
  background-color: white;
}


div2 {
    width:100%
    height: 3000px;
    position: fixed;
    background-color: black;
}

Answer 1

首先，您的示例代码有一些缺陷，例如错误的CSS选择器（除非您创建名为“div1”的自定义标记等），div2 CSS规则（;）中缺少结尾width:100% 。您还需要将固定div放在左/上0位置以将其定位在移动div之后。

要移动div移动，请添加bottom margin作为其height的大小，它将滚出视线/视口。

此技术有时称为 视差滚动 和here is a post showing more how/what one can do

.div1 {
  width:100%;
  height: 800px;
  position: relative;
  z-index:100;
  background-color: white;
  margin-bottom: 800px;
}


.div2 {
 top: 0;
 left:0;
 width:100%;
 height: 3000px;
 position: fixed;
 background-color: black;
 }

<div class="div1"></div>
<div class="div2"></div>

2个分区之间的关系

1 个答案: