在滚动上叠加div

Question

我不希望向下滚动页面来查看一堆div，而是希望它们叠加在同一个地方 - 一个堆叠在下一个顶部 - 滚动时。所以，你会向下滚动，但页面不会下降。相反，下一个div将覆盖第一个，依此类推。不知道怎么做？这是我有的：

UPDATE

.container {
    width:100%;
    height:100%;
    position:relative;

}

.container1 {
    display:block;
    position:fixed;
    margin-top:690px;
    width:100%;
    height:500px;
    z-index:1;
    background:#333;


  }

.container2 {
    display:block;
    position:absolute;
    margin-top:1190px;
    width:100%;
    height:500px;
    z-index:2;
    background:#F00;
}

<div class="container">

<div class="container1">
info
</div>

<div class="container2">
info
</div>
</div>

此调整正常，但底部div（container1）不是500px，而是设置为屏幕大小。我确信这是对代码的简单调整，但我很难过。

谢谢你的帮助！

Answer 1

这是一个概念证明，虽然有效，但确实需要跨浏览器进行测试（但我相信它可以在任何地方使用）并且稍微改进。

我们的想法是使用JavaScript来监视窗口的滚动位置，并相应地修复相应的内容面板，从而在滚动查看时给出新内容与其重叠的错觉。

http://jsfiddle.net/amustill/wQQEM/

Answer 2

使用固定位置而不是绝对位置：

.container1 {
    position: fixed;
    z-index: 1;
}
.container2 {
    position: fixed;
    z-index: 2;
}

Answer 3

为了仅使用CSS实现视差效果，您需要做的就是使用CSS background-attachment属性并将其设置为fixed并添加min-height

.parallax {
    /* The image used */
    background-image: url("img_parallax.jpg");

    /* Set a specific height */
    min-height: 500px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
   }

看看这个链接： https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm