Эффект при прокрутке страницы
Добрый день! Столкнулся с проблемой.
Есть 4 div блока с фиксироваными размерами При прокрутке страницы первый блок поднимаясь к верху экрана должен там и оставаться (position: fixed), а нижний блок при этом наезжать на него сверху и так далее. Данный эффект называется parallax (если не ошибаюсь). Когда то видел сайт с подобной реализацией, но сейчас найти не могу. Мне бы очень пригодился пример кода или хотя бы сайт на котором уже реализован данный эффект. Количество таких блоков-слайдов может меняться Вот HTML код: Код:
|
Все оказалось намного проще, чем казалось
Код:
<div id="content"></div>Код:
.auto-fixed{
(function(){
var divs = $('.auto-fixed');
function CachePositions(){
divs.each(function(){
$(this).data({initialTop:$(this).position().top});
});
}
var scrollable = $(window);
scrollable.scroll(function(){
divs.each(function(){
var top = $(this).data('initialTop');
if(top<scrollable.scrollTop()){
$(this).css({position:'fixed',top:0});
} else {
$(this).css({position:'absolute',top:top+'px'});
}
})
});
$(window).resize(function(){
CachePositions();
});
CachePositions();
})();
Результат можно посмотреть здесь: http://jsfiddle.net/ArtyomShegeda/6gCJE/ |
| Часовой пояс GMT +3, время: 00:20. |