CODEWITHSUNDEEP
csshtmlpositioningz-index
user1667057
user1667057

Reputation: 51

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 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!

Upvotes: 4

Views: 15262

Answers (3)

Arian Al Lami
Arian Al Lami

Reputation: 937

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

Upvotes: 3

amustill
amustill

Reputation: 5302

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/

Upvotes: 7

Abdul Malik
Abdul Malik

Reputation: 2642

Use position fixed instead of absolute:

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

Upvotes: 4

Related Questions