Is there a way to made a div a fixed header once it is scrolled out of view in IE6?

Question

Ok I know, I don't like IE6 any more than you do. In fact, I might like it less than you. However, I am stuck with it.

Basically I want exactly the same behavior as the "show page contents" feature on quirksmode but in IE6. That means I have a div which at first glance appears to be positioned relativly. Then when you scroll, just before the div goes out of view, it becomes positioned fixed. When you scroll back to the top, the div should not be positioned at the top of the window, it should be back to where it was on page start.

Answer 1

Yep - I do the same thing on a project I maintain at my cube job. You can use CSS expressions and a position fixed hack in an IE6 only stylesheet to get it working:

/* The background-attachment: fixed smooths out the IE scrolling */
body {
   background: url(foo.gif) fixed;  
}

/* Adjust the 100 to whatever height you want 
   your container to start being fixed position at */
#fixedElement {
   position: absolute;
   left: 0; 
   top: expression(documentElement.scrollTop > 100 ? documentElement.scrollTop : 100);
}

Note that the above documentElement.scrollTop is if IE6 is in standards mode. If you're in quirks mode, you'll need to change it to document.body.scrollTop.

Edit: Using current position of scrollable element

If you want to make it dynamic and use the current position of the element (get rid of the 100 in the above expression), you can do it by testing the position of a an element that is right at the threshold of where you want scrolling to begin:

HTML

<div id="startScroll"></div>
<div id="fixedElement">
   Fixed scrolling content
</div>

CSS

#fixedElement{
   position: expression(document.getElementById('startScroll').offsetTop < documentElement.scrollTop ? "absolute" : "static");
   top: expression(documentElement.scrollTop);
}

The reason you can't test on #fixedElement itself is because once it starts being fixed position, you've lost the threshold where you want scrolling to stop and start.

Also, #startScroll.offsetTop is going to be relative to its containing parent, so you may have to add a constant to it to take this into account (i.e. say it's in a #content container that is actually 50px from the top of the screen itself).