Боковые элементы «выезжают и уезжают» по горизонтали при скроллинге, как это реализовать?

Question

[Novamoscow]

Пример того, что нужно, есть на этом сайте. tds74.su

У меня всего 2 элемента которые должны приезжать и уезжать. Я думал сделать это с помощью позишен абсолют и изменения текущей позиции элемента.
Вот с функцией "сделать что то при скролле" я знаком. А вот как плавно менять позиционирование элемента ?

Answer 1

[Егор Живагин]

Функция .scrollTop() в jQuery высчитывает скролл от верхнего края. Тебе нужно в зависимости от неё менять left/right/top/bottom элементу
Так понятно?))

UPD: не абсолют, а fixed. Иначе подбирать высоту запаришься. Посмотри внимательнее на пример, ссылку на который кинул

Comments

[Novamoscow]

Это понятно, а вот как это сделать и как это сделать плавно не понятно

[Егор Живагин]

Novamoscow: чего именно непонятно? За плавность отвечает transition в css, ставьте какое нравится
Допустим, есть блок с классом left-block, который фиксирован и сдвинут влево left: -1000px

var left = $('.left-block').css('left');

$(window).scroll( function(){
if ( $(window).scrollTop() > 200 ) {
left = left - $(window).scrollTop();
$('.left-block').css('left': left )
}
});

Естественно, это просто пример. Можно и покрасивее написать, но мне лень

[Novamoscow]

Егор Живагин: а можно прокомментировать, что делают последние две строчки этого кода

[Егор Живагин]

Novamoscow: эти?
left = left + $(window).scrollTop();
$('.left-block').css('left': left )

1 - пересчитывает значение left в зависимости от скролла. Была опечатка, должен быть +, конечно.
2 - добавляет значение переменной left в css-свойство блока
И так при каждом изменении скролла, хоть на пиксель.