css - 在滚动条上叠加 div

Question

我不想向下滚动页面来查看一堆 div，而是希望它们在您滚动时叠加在同一个位置——一个叠在下一个之上。所以，你会向下滚动，但页面不会下降。相反，下一个 div 将覆盖第一个，依此类推。不确定该怎么做？这是我所拥有的:

更新

.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 来监 window 口的滚动位置并相应地固定适当的内容面板，从而在滚动查看时给人一种新内容与它重叠的错觉。

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