javascript - Skrollr 锚定目标问题

Question

当您使用 Skrollr 向下滚动页面时，我正在尝试将 div 滚动到另一个之上。我已经获得了使用两个 div 的预期效果，但是当我尝试使用第三个 div 时，似乎只有第一个和最后一个 div 有效。我想这是因为我没有完全理解 Skrollr 中的 data-anchor-target 属性是如何工作的。这是我尝试使用的 HTML:

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

还有 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

我错过了什么，不允许所有 3 个 div 都按预期运行，而不仅仅是第一个和最后一个？

谢谢。

Answer 1

这是一个没有锚定目标的例子 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>

它与我描述的不同，但有效。

有这个开放的功能请求，一旦实现，将使这变得容易得多 https://github.com/Prinzhorn/skrollr/issues/185然后，您将能够使用 data-100p 和 data-200p 在向下滚动一倍或两倍视口(viewport)高度后制作动画。