Question

关于使用skrollr视差滚动库，我有一个问题。我想要实现的目标如下：

当用户向下滚动页面时，他们将到达div，因为它会粘在视口的中心。当用户继续滚动时，粘性内的图像将逐一出现。一旦显示所有图像，它将继续到下一部分。理想情况下，这整个序列就像一个视差效应。

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

<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);
}

如果您的150px div高度不同，您可能希望将top:calc(50% - 150px);中的#container更改为其他内容。
https://jsfiddle.net/b4sh7zs1/3/正在行动

如果您希望此功能适用于包括polyfill在内的所有浏览器，请查看此文章http://www.sitepoint.com/css-position-sticky-introduction-polyfills/
你可以通过将div放在一个更高的div中来限制div在屏幕下方的距离，一旦它到达父容器的底部就停止移动。
这种效果可以在这里看到：http://html5-demos.appspot.com/static/css/sticky.html

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

在滚动上粘贴显示图像

1 个答案: