Colocar un menú que siga al scroll con Javascript

Siguiendo con la anterior entrada, hay un "plus" de las propiedades ya expuestas, aplicadas al objeto body...

Si bien en todos los navegadores salvo IE es posible colocar un elemento "atado" a la posición superior del navegador, sin importar lo que movamos el scroll con position:fixed este estilo es completamente ignorado en IE, por lo que si queremos una compatibilidad total debemos usar, una vez más, Javascript.

En primer lugar hay que obtener una referencia a body. Para ello a partir de cualquier referencia de elemento obtenida con getElementById realizamos elemento1.offsetParent y esto nos devolverá una referencia al body. A continuación dispondremos de estas propiedades:

• body.scrollLeft que nos devolverá la posición izquierda del área visible de scroll.
• body.scrollTop que nos devolverá la posición superior del área visible de scroll.
• body.scrollWidth que nos devolverá el ancho total de la zona scroll.
• body.scrollHeight que nos devolverá el alto total de la zona scroll.
• body.offsetWidth que nos devoverá el ancho total del viewport del body, incluyendo el scroll vertical.
• body.offsetHeight que nos devolverá el alto total del viewport del body incluyendo el scroll horizontal.

Basta con coger el elemento elemento1 y cargar body.scrollTop en su style.top así:

• elemento1.style.top=body.scrollTop.toString()+"px";

Ejecutamos periodicamente esa orden y ya tenemos un menú atado a la parte superior del viewport del navegador compatible con cualquier browser.

Más info: http://www.quirksmode.org/dom/w3c_cssom.html