Skrollr анимирует элемент внутри, относительно прокрутки div

Question

У меня возникла проблема с попыткой получить элемент для анимации внутри движущегося div;

Представьте, что у меня есть div (синий 800 широкий x 100 высокий), который находится за пределами экрана, под экраном, а когда вы прокручиваете вниз, он входит в экран и продолжает вверх и исчезает из верхней части экрана. Я называю это div «контейнером».

Теперь представьте, если у меня есть меньший div внутри «контейнера» div, называемый «ящик», и я применяю анимацию к «ящику», перемещающему ее слева направо.

Я ожидаю, что при прокрутке вниз коробка будет перемещаться слева направо внутри контейнера, так как контейнер перемещается вверх по экрану. (Результат в поле выглядит так, как будто он движется по диагонали вверх по экрану)

В результате я получаю, что контейнер перемещается вверх по экрану, как и ожидалось, но коробка теперь находится за пределами контейнера и перемещается справа налево в нижней части экрана

Я не могу понять, как сделать поле перемещающимся внутри его родительского контейнера и прокрутить его вверх.

Мне кажется, мне нужно использовать режим relative (или режим просмотра порт), но я не могу заставить его работать вообще.

распорка ДИВ:

<div id="justaspacer" style="height:1000px;"></div> 

(контейнер дел):

<div id="container" style="width:800px; background:#D1E3ED; height:100px; margin:auto;></div> 

(коробка дел):

<div id="box" style="background:#00F; width:100px; height:100px;" data-anchor-target="#container" data-100-bottom="left:100%; opacity:0;" data--100-bottom="left:50%;opacity:1;" data-top="top:80%;">"</div>" 

Это приводит к контейнеру прокрутки вверх и и поле влетать с экрана полностью удаляется из контейнера.

То есть весь код, никакой другой CSS и только

<script type="text/javascript" src="dist/skrollr.min.js"></script> 

<!--[if lt IE 9]> 
<script type="text/javascript" src="dist/skrollr.ie.min.js"></script> 
<![endif]--> 

<script type="text/javascript"> 
var s = skrollr.init({ 
    edgeStrategy: 'set', 
    easing: { 
     WTF: Math.random, 
     inverted: function(p) { 
      return 1-p; 
     } 
    } 
}); 
</script> 

Этот JavaScript

Любая помощь будет высоко ценится

сводит меня с ума

Надежда кто-то может помочь

Answer 1

Как сказал Дэн в комментарии, лет u нужно поместить контейнер относительно и поле абсолютное. Вы должны действительно изучить CSS, прежде чем попробовать skrollr.

http://jsbin.com/aWOB/1/edit

<div id="container" style="width:800px; background:#D1E3ED; height:100px; margin:auto;position:relative;"></div> 

---

<div id="box" style="background:#00F; width:100px; height:100px;position:absolute;" data-anchor-target="#container" data-bottom="left:100%;margin-left:-100px;" data-top="left:0%;margin-left:0px;"></div>