css - Overlay divs on scroll

Question

Instead of scrolling down the page to view a bunch of divs, I would like them to overlay in the same place-- one stacked on top the next -- when you scroll. So, you would scroll down, but the page would not go down. Instead, the next div would overlay the first and so on and so forth. Not sure how to do this? Here is what I have:

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>

This adjustment is working, but the bottom div (container1) is not 500px, but set to the size of the screen. I'm sure this is a simple adjustment to the code, but I am stumped.

Thanks for any help!

Answer 1

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

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

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

Answer 2

为了仅使用 CSS 实现视差效果，您需要做的就是使用 CSSbackground-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

Answer 3

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

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