Question

对于粘性div中序列中出现的图像，我需要一些帮助。

例如，当您向下滚动页面时，div会粘在顶部并保持到达某个点。在它粘到并到达终点之间，我需要图像逐个出现，第一个图像直接出现，最后一个出现在终点时。它需要遵循顺序，因此如果用户向上滚动它将会倒带＃39;。

我正在进行jsFiddle的工作。任何帮助将不胜感激。

https://jsfiddle.net/tebrown/avevLepz/3/

<div class="containers">
<section class="green"></section>
<div class="rowstick stickem-container">
    <div class="content1500">
        <div class="aside stickem">
            <div id="col1">Image 1</div>
            <div id="col2">Image 2</div>
            <div id="col3">Image 3</div>
            <div id="col1">Image 4</div>
            <div id="col2">Image 5</div>
            <div id="col3">Image 6</div>
        </div>
    </div>
</div>
</div>
<section class="blue"></section>
<section class="red"></section>
</div>

干杯

Answer 1

假设我正确地解释了你的要求，我认为这应该或多或少地给你你想要的东西：

http://jsfiddle.net/6fezb6wL/

我重新格式化了你的标记，现在每个粘性图像都有一个容器。我也改变了很多CSS，但试图添加解释性注释。

缺点：我基本上将它们放在display: none上，直到它们到达正确的位置，此时我将打开它们。而前一个消失在它背后。溢出/ 0高度黑客是为了防止图像在撞到容器底部后向上移动。我认为这是预期效果的一部分。

以下是另一种变体：http://jsfiddle.net/6fezb6wL/1/

Sticky Div中的jQuery图像序列

1 个答案: