在滚动上叠加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/