Revealing a div behind another with scrolling

I'm currently working on a joomla website in which I have multiple modules such as :

<div class = "mod_slideshow"></div>
<div class = "blog-featured"></div>
<div class = "mod_example"></div>

and I would like them to overlap over one another just like in this website : http://www.lyonaeroports-t1.com/fr/la-qualite-de-service-au-coeur-du-projet

So far, the only thing I managed to to is to toggle the position to "fixed" of every div depending on window.scrollTop. The div scrolls over the previous one but doesn't "appear" juste like in the website mentioned.

I really don't know how to do this, any help would be very welcome.

Solution

This effect that they are achieving is called "Parallax Scrolling effect"

The example that you have shown is actually very easy - your magic CSS property is background-attachment: fixed. Consider the below HTML

Codepen

HTML

<div class="mod_slideshow"></div>
<div class="blog-featured"></div>
<div class="mod_example"></div>

the appropriate CSS code should be (no JS required for this)

.mod_slideshow {
  background: url("http://www.w3schools.com/css/trolltunga.jpg");
  height: 500px;
  background-attachment: fixed;
}

.blog-featured {
  background: url("http://www.aee-community.com/wp-content/uploads/rtMedia/users/1/2016/09/2429637D00000578-0-image-a-284_1419003100839.jpg");
  height: 500px;
  background-attachment: fixed;
}

.mod_example {
  background: url("http://economictimes.indiatimes.com/thumb/msid-25252601,width-640,resizemode-4/stunning-images-of-the-space.jpg");
  height: 500px;
  background-attachment: fixed;
}

Simple :-) just give a height to your div with the fixed background. Remember the div itself is NOT fixed, the background image is.

.mod_slideshow {
  background: url("http://www.w3schools.com/css/trolltunga.jpg");
  height: 500px;
  background-attachment: fixed;
}

.blog-featured {
  background: url("http://www.aee-community.com/wp-content/uploads/rtMedia/users/1/2016/09/2429637D00000578-0-image-a-284_1419003100839.jpg");
  height: 500px;
  background-attachment: fixed;
}

.mod_example {
  background: url("http://economictimes.indiatimes.com/thumb/msid-25252601,width-640,resizemode-4/stunning-images-of-the-space.jpg");
  height: 500px;
  background-attachment: fixed;
}

<div class="mod_slideshow"></div>
<div class="blog-featured"></div>
<div class="mod_example"></div>