Topic awaiting preservation: Hiding a Div when scrolling (Page 1 of 1)

How can I hide a div while the page is being scrolled and display it again immediately after scrolling ends?

FYI the xhtml page will only be seen in IE6. I have a menu which is always positioned at the top of the client area. I can accomplish this by using expressions for dynamic css attributes as follows

menu.setExpression('top','canvas.scrollTop')

and

canvas.onscroll=function() {document.recalc(true)}

where menu is the menu div and canvas is document.documentElement. This works fine regardless of how the page is scrolled but it is kind of jerky in appearance. It would be nicer to hide the menu while the page scrolls and have it reappear in the proper location when scrolling ends but there doesn't seem to be a pretty way to code this.

The following code works except when the page is scrolled with the mousewheel but I would like to find a more eligant and reliable way to do this.

canvas.onscroll=function() {menu.style.visibility='hidden';document.recalc(true)}
canvas.onmousemove=function() {menu.style.visibility='visible'}
canvas.onkeyup=function() {menu.style.visibility='visible'}

Any ideas?

TIA

Probably no better but if you have a function on an interval measuring the differences in the scrolled length that is run onScroll, hide is when its changing , show when it stays the same for one third of a second or three runs of the function.

Okay thats a bit weird to explain.

onscroll=doStuff();
var t=0; // <- amount of Times function is run after onscroll;
var i=0; // <- keeps scrolled length from last run;

function doStuff() {
if(t==0) i=[scroll-length];
++t;
if(t<5) {
if([scrolled-length] != i) {
hideme();
t=1;
}
else if(t>=3) showme();

i= [scrolled-lenght];
setTimeout("doStuff()",500);
}
}

Syntax isnt right and i didnt want to type the correct or variations of [scrolled-length], if the valued keeps changing it should keep running untill it stops for 3 passes, haven't run any test its just I couldnt really explain it. Theres probably a better way too.

FWIW you could use the CSS "fixed" property to acomplish this without any scripting at all. It's just a pitty IE doesn't support this one yet.

Thanks guys. I think I'll just leave it as is for now. The menu doesn't snap into position when the mousewheel is turned but it will as soon as the mouse moves.

Cameron, I tried the css hack in the faq for position:fixed in IE but unfortunately it doesn't work when all the content on the page is positioned absolutely - unless I am missing something. Yeah I wish IE supported position:fixed too.

Come to think of it, even if IE did support position:fixed I would still have the same problem. I have been studying event bubbling using IEDocMon and have found that scrolling with the mousewheel is different (event-wise) from scrolling with a keypress or by dragging a scrollbar in that it doesn't seem to be a composite event. Without the secondary event firing after onmousewheel my menu div would still be hidden until the mouse moves as now.