javascript - Stack of slides continuously growing -

Tell us that I want to design a website with four slides. I want every slide to cover the previous slide, while the visitor is scrolling. There is an attempt with the following stellar.js (a jquery plugin): You can see that it works for the first slide, which is covered by another Goes, but I could not work for others.

HTML:

  & lt; Body & gt; & Lt; Div id = "one" data-stellar-proportion = ".2" & gt; & Lt; P & gt; This is the first div. & Lt; / P & gt; & Lt; / Div & gt; & Lt; Div id = "two" data-stellar ratio = "1" & gt; & Lt; P & gt; This is second. & Lt; / P & gt; & Lt; / Div & gt; & Lt; Div id = "three" & gt; & Lt; P & gt; The third one! & Lt; / P & gt; & Lt; / Div & gt; & Lt; Div id = "four" & gt; & Lt; P & gt; Fourth and final & Lt; / P & gt; & Lt; / Div & gt; & Lt; / Body & gt;  

CSS:

* {margin: 0; Padding: 0; } # One, #b, # tri, #for {status: full; Height: 100%; Width: 100%; Font size: 5em; } P {margin: 1 AM; Width: 60%; } # A {background: red; } #two {background: blue; top 100%; } #three {background: green; Top: 200%; } # Fur [background: yellow; Top: 300%; } I was able to throw something just by using jQuery and any other libraries. I was able to throw something just by using jQuery and any other libraries.

relative position, in fact, until one of the slides in the browser does not reach the top of the window, everything is scrolled. Once this browser tries to scroll up from the top of the window, I add the offset in the vertical position of the slide to keep it moving any further. While scrolling back on the other side, I decrease this offset until it hits on 0, it normally starts again.

I'm sure the code can be cleared, but I comment a ton and hopefully it's readable. If you have any questions or you want you to modify it to suit your needs, please tell me the solution I came up with is a fiddle with:

< P> You can also see the full page demo of the same code here: