Skip to content
This repository
Fetching contributors…

Cannot retrieve contributors at this time

file 46 lines (40 sloc) 1.559 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
<p>The red and yellow boxes should follow the green box when you scroll any scrollbar.</p>

<style>
#container { height:1000px; }
#inner-container1 { height:200px; overflow:scroll; margin:100px 0; width:40%; }
#inner-container2 { height:200px; overflow:scroll; width:40%; position:fixed; top:185px; right:0; }
.red { width:30px; height:30px; background:red; margin:120px auto; }
.green { width:30px; height:30px; background:green; }
.yellow { width:30px; height:30px; background:yellow; }
#red0 { margin:0 0 0 50px; }
</style>

<div id="red0" class="red"></div>
<div id="green0" class="green"></div>
<div id="yellow0" class="yellow"></div>

<div id="container">
<div id="inner-container1">
<div id="red1" class="red"></div>
<div id="green1" class="green"></div>
scroll
</div>
<div id="inner-container2">
<div id="red2" class="red"></div>
<div id="green2" class="green"></div>
scroll
</div>
</div>

<div id="yellow1" class="yellow"></div>
<div id="yellow2" class="yellow"></div>
<script src="/depender/build?require=More/Element.Position,Core/Element.Event"></script>

<script>
var position = function(){
['0','1','2'].each(function(post){
$('green' + post).position( {relativeTo: $('red' + post), position: 'centerRight', edge: 'centerLeft'});
$('yellow' + post).position({relativeTo: $('red' + post), position: 'centerLeft', edge: 'centerRight'});
});
};

position();
window.addEvent('scroll', position);
$('inner-container1').addEvent('scroll', position);
$('inner-container2').addEvent('scroll', position);
</script>
Something went wrong with that request. Please try again.