Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

47 lines (40 sloc) 1.559 kb
<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>
Jump to Line
Something went wrong with that request. Please try again.