fixed position with Javascript

[rmgraci]

I'm looking for a position:fixed solution in JS, perhaps with some
simple animation. A popular example would be the map on yelp.com
(http://www.yelp.com/search?find_loc=Pacific+Heights%2C+San+Francisco
%2C+CA&cflt=restaurants). I know there are some simple solutions with
MooTools, but I haven't found much with scriptaculous. The
documentation links on script.aculo.us are broken, though, and when
I'm led to github by Google, I seem to find empty pages for all of the
methods I click on.

I can't imagine this is a novel idea - are there existing methods in
Scriptaculous already, or extensions to Scriptaculous that will make
position:fixed work even for older browsers (eg IE 6), and possibly
add an animation as well?

Thanks,
-Ryan

[Andrew Dupont]

Script.aculo.us is a higher-level framework that deals with effects
and UI components. Prototype is the analog to MooTools, and below is
an (untested) example of how you'd do this with Prototype. (Keep in
mind, though, that there's very little framework-specific code in
here, and all frameworks would approach this in similar ways.)

Cheers,
Andrew


function makeFixed(element) {
element = $(element);
// Make sure that the element's "offset parent" is the document
itself;
// i.e., that it has no non-statically-positioned parents
element.setStyle({ position: "absolute" });

function adjust() {
// Set the element's CSS "top" to the scroll offset of the window
element.style.top = window.scrollTop + "px";
}

// Re-adjust whenever the window scrolls
Event.observe(window, "scroll", adjust);
adjust();