<分区>
标签 javascript html css
<分区>
想象一下 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;
}
最佳答案
首先，您的示例代码存在一些缺陷，例如错误的 CSS 选择器(除非您创建了名为“div1”的自定义标签等)，div2 CSS 规则中缺少结尾 ; (宽度:100%)。您还需要将固定的 div 定位在左侧/顶部 0 以将其定位在移动的 div 之后。
要让移动的 div 移动，请添加一个 bottom margin 作为其 height 的大小，它将滚动到视线/视口(viewport)之外。
这种技术有时称为视差滚动 和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>关于javascript - 2个分区之间的关系，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34057412/