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!

It almost sounds like you want a flip box - http://lab.smashup.it/flip/ - as otherwise, your interface will be very confusing - people know what scrollbars are for, and to subvert them for your UI may leave people unsure about using your application. — dash, Oct 07 '12 at 17:56
Hi thanks for responding-- no not a flip box. I would just like the divs to stack when scrolling down — user1667057, Oct 07 '12 at 17:58

score 7 · Accepted Answer · answered Oct 07 '12 at 20:14

7

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/

answered Oct 07 '12 at 20:14

amustill

5,274
23
15

Brilliant. It help me a lot. I have a problem with scrolling only on chrome. Here is my problem : http://stackoverflow.com/questions/20750240/chrome-only-overlay-divs-on-scroll-with-fixed-position-scrolling-issue. Thanks for your answer. I don't know what I could do without it. – Laxmana Dec 23 '13 at 19:52
Hi! that is some great code. I am trying to achieve a very similar but somewhat reversed effect . Meaning scolling will push the current panel up, and reveal the next one. Do you have an idea on that? – Adeerlike Jun 17 '15 at 10:23
cant edit: want i am looking for is a way for the upcoming panel to be waiting under the current one, and scrolling will push the current slide up revealing the underlying one. – Adeerlike Jun 17 '15 at 12:29

score 4 · Answer 2 · edited Oct 07 '12 at 18:39

4

Use position fixed instead of absolute:

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

edited Oct 07 '12 at 18:39

ThiefMaster

310,957
84
592
636

answered Oct 07 '12 at 18:04

Abdul Malik

2,632
1
18
31

I tried this-- did not work. Please see the revised code above – user1667057 Oct 07 '12 at 18:22

score 3 · Answer 3 · edited Jun 13 '18 at 13:07

3

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

edited Jun 13 '18 at 13:07

JonathanDavidArndt

2,518
13
37
49

answered Dec 08 '17 at 15:32

Arian Al Lami

867
7
9

This is exactly what I am looking for. No javascript, just pure css. – carlo Aug 28 '20 at 00:42

Overlay divs on scroll

3 Answers3

Linked