Показать сообщение отдельно
  #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/
Ответить с цитированием