Sha256: cb5ded1e0995aafc7d9fac2b4677bc7a463f99106a730e35c045e6b13fee0405
Contents?: true
Size: 1.52 KB
Versions: 7
Compression:
Stored size: 1.52 KB
Contents
<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>
Version data entries
7 entries across 7 versions & 1 rubygems