Jquery 在“粘滞滚动”中显示图像

我有一个关于使用skrollr视差滚动库的问题。我正在努力实现以下目标：

当用户向下滚动页面时，他们将看到一个div，因为它会粘在视口的中心。当用户继续滚动时，粘滞区域内的图像将逐个出现。显示所有图像后，将继续下一节。所以理想情况下，整个序列就像是视差效果

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

非常感谢你的帮助

干杯

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

尽管您可能希望更改顶部的150px：calc50%-150px；如果您的容器div高度不同，则将更改为其他内容。 行动中

如果您想在包括polyfill在内的所有浏览器中都使用此功能，请参阅本文 您可以通过将div放置在较高的div中来限制其在屏幕下方的停留距离，一旦到达父容器的底部，它就会停止移动。 在这里可以看到这种效果：

希望这有助于引导您找到解决方案

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

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