Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.05.2013, 14:53
Новичок на форуме
Отправить личное сообщение для Baskerville42 Посмотреть профиль Найти все сообщения от Baskerville42
 
Регистрация: 16.05.2013
Сообщений: 2

Эффект при прокрутке страницы
Добрый день! Столкнулся с проблемой.
Есть 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>
Ответить с цитированием
  #2 (permalink)  
Старый 17.05.2013, 02:29
Новичок на форуме
Отправить личное сообщение для Baskerville42 Посмотреть профиль Найти все сообщения от Baskerville42
 
Регистрация: 16.05.2013
Сообщений: 2

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

Код:
<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/
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать чтобы элемент появлялся при скроле страницы, у определенного класса. SnakeAce Общие вопросы Javascript 1 30.01.2013 14:32
Прижимание блока при прокрутке страницы byFahrenheit Общие вопросы Javascript 2 14.01.2013 14:03
Фиксация объекта при скрулинге страницы Pashok(one) Общие вопросы Javascript 10 08.01.2013 02:52
Как задать изменение src при прокрутке chandler Элементы интерфейса 3 12.01.2012 01:23
Появляющаяся/исчезающая кнопка при прокрутке страницы MailRes Элементы интерфейса 2 22.06.2011 11:49