Skrollr issues with anchor-targets

Question

I'm attempting to roll divs over one another as your scroll down a page using Skrollr. I've gotten the desired effect to work with two divs, but when I try to make it work with a 3rd, only the first and last div seem to work. I'm thinking this is because I'm not fully understanding how the data-anchor-target attribute in Skrollr works. Here is the HTML I'm attempting to use:

<div id="skrollr-body">
        <div id="q1" data-0="top:0%;">
            Text
        </div>
        <div id="q2" data-anchor-target="#q1" data--200-bottom="top:100%;" data-top-bottom="top:0%;">
            Text2
        </div>
        <div id="q3" data-anchor-target="#q2" data--200-bottom="top:100%;" data-top-bottom="top:0%;">
            Text3
        </div>
    </div>

And the CSS:

body, html {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
#skrollr-body {
    width:100%;
    height:100%;
    position:fixed;
}
#skrollr-body > div {
    overflow:hidden;
    position:absolute;
    height: 100%;
    width: 100%;
}
#q1 {
    background: url(http://2.bp.blogspot.com/-RtoJ2papsoA/UhicT91ixmI/AAAAAAAACeg/2XEhv26ZFJc/s1600/jghjgh.jpg) center center no-repeat;
    background-size: cover;
}
#q2 {
    background: url(http://2.bp.blogspot.com/-RtoJ2papsoA/UhicT91ixmI/AAAAAAAACeg/2XEhv26ZFJc/s1600/jghjgh.jpg) center center no-repeat;
    background-size: cover;
}
#q3 {
    background: url(http://iwritealot.com/wp-content/uploads/2010/02/golden-clouds-wallpaper.jpg) center center no-repeat;
    background-size: cover;
}

Fiddle here

What am I missing that is not allowing all 3 divs to behave as expected, instead of just the first and last?

Thanks.

Answer 1

Here's an example without anchor-target http://jsfiddle.net/YMYTy/1/

<div id="skrollr-body">
    <div id="q1">
        Text
    </div>
    <div id="q2" data-bottom-top="top:100%;" data-top="top:0%;">
        Text2
    </div>
    <div id="q3" data-bottom-top="top:100%;" data-top="top:0%;">
        Text3
    </div>
</div>

It's different than what I described, but works.

There's this open feature request which, once implemented, will make this much easier https://github.com/Prinzhorn/skrollr/issues/185 You will then be able to use data-100p and data-200p to have animations after you scrolled down one or two times the height of the viewport.