Все оказалось намного проще, чем казалось
Код:
|
<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/