Показать изображения в пределах липких на прокрутке

Question

У меня есть вопрос относительно использования прокрутки scrollr parallax library. То, что я пытаюсь достичь, следующее:

Когда пользователь прокручивает страницу вниз, он достигнет 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); 
} 

хотя вы можете захотеть изменить что 150px в top:calc(50% - 150px); к чему-то еще, если ваш #container высота DIV должен быть разным.
https://jsfiddle.net/b4sh7zs1/3/ в действии

, если вы хотите, чтобы это работало во всех браузерах, включая polyfill, проверить эту статью http://www.sitepoint.com/css-position-sticky-introduction-polyfills/
Вы можете ограничить, насколько далеко вниз экране DIV будет прилипать к, помещая его в более высокий DIV, он останавливается, когда он достигает нижней части родительского контейнера.
Этот эффект можно увидеть в действии здесь: http://html5-demos.appspot.com/static/css/sticky.html

Надеюсь, что это поможет вам решить!