Animated Floating Sidebar
UPDATED 2009-07-02 - I changed this script to also function in Google Chrome by working around a bug in Google Chrome.
I wrote this the other day and thought it was worth posting here. It is Javascript that will allow you to float a div that moves up and down as the user scrolls the webpage in the browser window. It will speed up and animate faster if the user scrolls quickly from spot to spot or slower if they scroll slowly.
Here is the Javascript.
/**
* Animates a floated div to move up and down with the scrolling of the page.
*
* More details at http://www.finefrog.com/2007/12/14/animated-floating-sidebar/
*
* @author Jordon Mears <jordoncm at gmail dot com>
*/
function animate_box() {
var offset = 0; /* set this to the starting margin-top in the css */
var element = document.getElementById('animate_box');
if(element) {
var top = Number(String(element.style.marginTop).substring(0, String(element.style.marginTop).indexOf('px')));
try {
if(document.body.scrollTop > 0) {
var difference = (document.body.scrollTop + offset);
} else if(document.documentElement.scrollTop > 0) {
var difference = (document.documentElement.scrollTop + offset);
} else {
var difference = offset;
}
} catch(e) {
var difference = offset;
}
difference = difference - top;
if(difference > 0) {
element.style.marginTop = (top + Math.abs(Math.ceil(difference / 10))) + 'px';
} else if(difference < 0) {
element.style.marginTop = (top - Math.abs(Math.ceil(difference / 10))) + 'px';
}
}
}
window.setInterval(animate_box, 50);
Here is the div. Since it is just a float, you can easily embed it inside other elements.
I am an animated div that scrolls with the browser window.
Click here to see an example of it at work.
It works in all standard compliant browsers and Internet Explorer 6+ (maybe even older).
You are welcome to use this for whatever you want; I just ask that you retain the credits (and maybe leave me a comment).


November 16th, 2008 at 18:33:41
Thanks for the great script! I’m trying to use it on my site, http://www.outdoorhighadventure.com! Thanks again.
July 2nd, 2009 at 07:47:58
Works great in Firefox but doesn’t work in Chrome ?
July 2nd, 2009 at 09:43:01
This appears to be a bug in Google Chrome. I found two bugs related to it. I updated the Chrome bugs and the links are below.
http://code.google.com/p/chromium/issues/detail?id=2891
http://code.google.com/p/chromium/issues/detail?id=15536
July 2nd, 2009 at 14:40:31
I wrote fix into the script to work around the bug in Google Chrome.
July 3rd, 2009 at 04:56:26
Thanks !
: )