Overlay Divs On Scroll

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 do

Solution 1:

Here is a proof of concept that, whilst works, does need to be tested across browsers (however I'm confident that it will work everywhere) and slightly refined.

The idea is to use JavaScript to monitor the window's scroll position and fix the appropriate content panel accordingly, giving the illusion that the new content is overlapping it when scrolling in to view.

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

Solution 2:

In order to achieve the parallax effect with CSS only, all you need to do is use the CSS background-attachment property and set it to fixed and also add 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;
   }

Check out this link: https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm

Solution 3:

Use position fixed instead of absolute:

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