Эффект при прокрутке страницы
Добрый день! Столкнулся с проблемой.
Есть 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, время: 23:38. |