Thanks all, some good examples here. Paul, your example wasn't quite what I was looking for, because the window pushes the element from the bottom also, and it needed to be automated more. It's interesting in the way it works though
Ryan J - thank you! Exactly what I'm after. Hopefully this will prove useful to others too. :) I have also included here a script for 1.1 that I found,which basically does the same thing I was after too: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>scrolly</title> <script type="text/javascript" src="scripts/mootools.v1.11.js"></ script> <script type="text/javascript"> simulateFixed = new Class({ options : { duration:500, transition: Fx.Transitions.Elastic.easeOut }, initialize : function(id, bound, fixed_top, options){ this.fixed = $(id); this.options = options ? options : this.options; this.bound = bound; this.fixed_top = fixed_top this.offset = this.fixed.getStyle('top').toInt(); this.fx = new Fx.Style(this.fixed, 'top', this.options); window.addEvent('scroll',this.scrolled.bind(this)); }, scrolled : function(){ // mootools.js: getScrollTop document.body.scrollTop this.fx.stop(); if( window.getScrollTop() < this.bound ) { this.fx.start( this.offset ); } else { this.fx.start( this.fixed_top + window.getScrollTop() ); } } }); window.addEvent('domready',function(){ new simulateFixed('fixed', 100, 10, { duration:1000 }); //100 is when position from top to start scrolling }); </script> </head> <body> <div id="top" style="width:700px;"> <div style="float:left;width:450px; height:1500px; background:#bbb;"> <p>long content</p> </div> <div id="fixed" style="position:absolute;top:10px;left: 450px;border: 1px solid #f00;width:250px;height:200px;background:#cac;"> <p>scrolly element</p> </div> </div> </body> </html>
