layer scroll problem

need a layer on scrolling page to stay static

[username here]

hey can any1 help?

i made a layer/<div> element and i want it to stay where it is (positioned absolutely) when the page is scrolled.

is there any kind of style="??" or something that makes the layer stay stationary when page is scrolled.

is there any way of doing this??

thx

[wardbekker]

yep...catch the scroll event of the document and add the scroll size to the Y coordinate of the layer. When scrolling back, subtract the difference ;-)

[username here]

isn't there some kind of background-attachment:fixed type equivelent for for layers?

where can i et info on scroll events?

[MikeFoster]

wardbekker is right.

But you have to simulate the window scroll event in NS4+ and Opera.

This menu example [cross-browser.com...] uses my library, but the initialization is close enough to DOM2 that you can see the general setup for a floating element.

var menuAnchor, slidingMenu;
function windowOnload()
{
 menuAnchor = document.getElementById('menuAnchor').cbe;
 slidingMenu = document.getElementById('slidingMenu').cbe;
 window.cbe.addEventListener("scroll", slidingMenuListener);
 setTimeout("init()", 250);
}
function init() {
 slidingMenu.resizeTo(80,300);
 slidingMenu.moveTo(10, menuAnchor.pageY());
 slidingMenu.show();
}
function slidingMenuListener()
{
 slidingMenu.slideTo(10, menuAnchor.pageY() + document.cbe.scrollTop(), 1000);
}

[tedster]

For a glimpse of what's supposed to be (but has very weak browser support to date) you can visit this W3C page [w3.org].

Just as you thought, usernmame_here, position:fixed is supposed to "fix" a div's position relative to the viewport rather than relative to the page. IE6 doesn't support it, Netscape 6 does, but the scrolling is awkward. Opera 6 renders the page beautifully.

Some day it will be as simple as position:fixed.

[MikeFoster]

You're right Tedster, it will be really nice when position:fixed is better supported.