Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Эффект при прокрутке страницы (https://javascript.ru/forum/jquery/37991-ehffekt-pri-prokrutke-stranicy.html)

Baskerville42 16.05.2013 14:53

Эффект при прокрутке страницы
 
Добрый день! Столкнулся с проблемой.
Есть 4 div блока с фиксироваными размерами
При прокрутке страницы первый блок поднимаясь к верху экрана должен там и оставаться (position: fixed), а нижний блок при этом наезжать на него сверху и так далее. Данный эффект называется parallax (если не ошибаюсь). Когда то видел сайт с подобной реализацией, но сейчас найти не могу.
Мне бы очень пригодился пример кода или хотя бы сайт на котором уже реализован данный эффект.
Количество таких блоков-слайдов может меняться

Вот HTML код:
Код:


<ul id="nav">
    <li><a href="#s1">1</a></li>
    <li><a href="#s2">2</a></li>
    <li><a href="#s3">3</a></li>
    <li><a href="#s4">4</a></li>
  </ul>
 
  <div id="s1" class="slidePage"></div>
  <div id="s2" class="slidePage"></div>
  <div id="s3" class="slidePage"></div>
  <div id="s4" class="slidePage"></div>


Baskerville42 17.05.2013 02:29

Все оказалось намного проще, чем казалось

Код:

<div id="content"></div>
<div id="d1" class="auto-fixed"></div>
<div id="d2" class="auto-fixed"></div>
<div id="d3" class="auto-fixed"></div>
<div id="d4" class="auto-fixed"></div>

Код:

.auto-fixed{
    width:100px;
    height:100px;
    position:absolute;
}

#d1{
    background:#f00;
    top:50px;
}
#d2{
    background:#0f0;
    top:200px;
}
#d3{
    background:#00f;
    top:400px;
}
#d4{
    background:#088;
    top:600px;
}

#content{
    float:left;
    width:50%;
    height:800px;
    background:#fee;
}

(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.