Skrollr: div перемещается вверх и вниз при изменении значения margin-top

У меня проблема со Скроллром. У меня есть div (серый), который меняет свое положение слева направо при прокрутке вниз. Внутри div (желтый) есть еще один div. Я хочу, чтобы он оставался на той же высоте, пока родительский элемент div все еще меняет свое положение. Я попытался сделать это, изменив margin-top, вот так:

<div id="grey" data-100="right:100%;" data-700="right:50%;">
<div id="yellow" data-100="margin-top:200px;" data-700="margin-top:800px;"</div></div>

И вот что происходит. Все бы ничего, но желтый div плавает вверх и вниз при движении вправо. Есть ли способ решить эту проблему без использования «position:fixed»? Спасибо за помощь!

РЕДАКТИРОВАТЬ: Кстати, на iPad это работает.


margin skrollr
person TSchlze    schedule 23.11.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Браузер перемещает желтый div вверх (вместе со всем остальным, потому что он прокручивается), а чуть позже анимация margin-top снова перемещает его вниз. Единственный способ получить идеальные результаты — использовать fixed.

Но вы можете сделать его немного лучше, отключив плавную прокрутку для желтого блока. Вы все равно увидите, как он прыгает при очень быстрой прокрутке.

<div id="yellow" data-smooth-scrolling="off" data-100="margin-top:200px;" data-700="margin-top:800px;"</div>

Также я предлагаю использовать преобразования CSS вместо поля.

<div id="yellow" data-smooth-scrolling="off" data-100="transform:translate(0, 200px);" data-700="transform:translate(0, 800px);"</div>
person Prinzhorn    schedule 24.11.2013
comment
Большое спасибо, в Firefox и Chrome теперь все просто идеально. В других браузерах он по-прежнему льстит, но не так сильно, как раньше: ссылка - person TSchlze; 24.11.2013