显示图像粘在滚动

Question

我有一个关于使用skrollr视差滚动库的问题。我想达到的目标如下:

当用户向下滚动页面时，他们会看到一个div，它粘在视窗的中心。当用户继续滚动时，粘性内的图像将一个接一个地出现。显示所有图像后，将继续进行下一节。理想情况下，整个序列就像视差效果。

我有一个正在进行工作的jsFiddle文档，但希望得到进一步的帮助。

https://jsfiddle.net/tebrown/b4sh7zs1/

<section class="blue"></section>
<section class="green"></section>
<section class="yellow"></section>
<div id="container">
When this div is hit it needs to be stuck (fixed) center of viewport until it finished animating images in one by one. 

<br />
<div id="blue" data-anchor-target="#container" data-0-top="opacity:0;" data-100-top="opacity:1;"></div>
<div id="blue" data-anchor-target="#container" data-100="opacity:0;" data-bottom-top="opacity:0;" data-top-bottom="opacity:1;"></div>
<div id="blue" data-anchor-target="#container" data-100="opacity:0;" data-bottom-top="opacity:0;" data-top-bottom="opacity:1;"></div>
</div>
<section class="red"></section>
<section class="orange"></section>

非常感谢你的帮助。

欢呼

Answer 1

使用position:sticky可能是您的答案。

<section class="blue"></section>
<section class="green"></section>
<section class="yellow"></section>
<div id="container" class="sticky">
    When this div is hit it needs to be stuck (fixed) center of viewport until it finished animating images in one by one. 
    <br />
    <div id="blue" data-anchor-target="#container" data-0-top="opacity:0;" data-100-top="opacity:1;"></div>
    <div id="blue" data-anchor-target="#container" data-100="opacity:0;" data-bottom-top="opacity:0;" data-top-bottom="opacity:1;"></div>
    <div id="blue" data-anchor-target="#container" data-100="opacity:0;" data-bottom-top="opacity:0;" data-top-bottom="opacity:1;"></div>
</div>
<section class="red"></section>
<section class="orange"></section>

css

.sticky{
    position:sticky;
    top:calc(50% - 150px);
}

虽然你可能想改变top:calc(50% - 150px);中的150px为其他东西，如果你的#containerdiv高度是不同的。
https://jsfiddle.net/b4sh7zs1/3/in action

如果你想让它在包括polyfill在内的所有浏览器中工作，请查看这篇文章http://www.sitepoint.com/css-position-sticky-introduction-polyfills/
你可以限制div在屏幕下方停留的距离，把它放在一个更高的div中，一旦它到达父容器的底部就停止移动。
这个效果可以在这里看到:http://html5-demos.appspot.com/static/css/sticky.html

希望这能帮助你找到一个解决方案!