Skrollr - How to stop the div stop scrolling when reaching top ot window

Question

I am trying to make my website using Skrollr (javascript library): http://prinzhorn.github.io/skrollr/

The scrollr works fine, but I am not able to figure out one thing. How do I stop a div scrolling further away from the top of the screen. Once the top of the div hits the top of my page, i want it to stop scrolling, so that when the second div starts coming on top of it, it gives the feeling of stacked cards.

And when scrolling back, the div will start to scroll after the one on top has left the bottom of the page.

I hope my explanation is a bit clear, if not I will try to explain using graphics.

Now the code part. After reading the documentation, I tried both these:

data-top and data-end none of them worked actually.

I also tried: data-top="background-position:0px 0px;"

I am not even sure if what I want to achieve is possible or not.

If not, can I do overlapping vertical scrolling by reducing the scroll speed after the top of the div crosses the top of browser window.

Please ask me if any of my explanation is confusing, I know it's not easy to explain the problem verbally.

Solution

skrollr does not do any magic, just CSS. If you want the div to stop, then find a way to do this using CSS. Usually this is accomplished using fixed positioning.

Like this (not tested, but should give you the idea)

<section data-0="position:static;" data-top="position:fixed;"></section>

Now one problem will probably occur. All the following elements will move up, because the element is taken out of the flow. You could solve this for example using a dummy-element or margin-top or top (with relative positioning) in conjunction with data-anchor-target pointing to the element.