This seems like I'm just missing some syntax or getting it wrong, but on an ie6 specific style-sheet this locks it to the top of the view-port and stays fixed despite scrolling:
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
But, this does not lock it to the bottom in the same manner:
bottom: expression(0+((e=document.documentElement.scrollBottom)?e:document.body.scrollBottom)+'px');
Any ideas?
There is no such property as scrollBottom.
bottom is the distance between the bottom edge of the positioned element and the bottom edge of the Containing Block. Assuming the element is not inside any other positioned elements, that's the Initial Containing Block, in practice effectively the initial viewport.
So when the viewport scrolls down from its initial (top) position, the bottom position would need to become negative to move it downwards to match:
// set from script. This is much more reliable than sniffing for
// scrollTop being zero. If your page has a Standards Mode doctype,
// which in this century it really should, then you don't need this,
// you can just always use document.documentElement.
//
var root= document.compatMode==='CSS1Compat'? document.documentElement : document.body;
/* then: */
top: expression(root.scrollTop+'px');
/* or: */
bottom: expression(-root.scrollTop+'px');
However there is yet another IE6 bug where setting the bottom style of an absolutely-positioned element is actually relative to the current viewport position instead of the initial viewport position. So actually what you'd set bottom to would be 0 at all times, even though it was already set to 0...!
I personally still wouldn't use expression for anything, even an IE6-only hack. It's pretty unreliable, as it can't always tell when it need to recalculate. For me, I don't usually see an expression recalculation on scroll; there are also some resize, text-scale or DOM operations that change document dimensions which will not trigger a recalucation.
Better to catch onscroll and onresize from script to call the repositioning, and add a slower setInterval poller to update it for the other cases that can't be caught from events.
Example code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<style type="text/css">
body { margin: 0; }
#tools {
position: fixed; z-index: 9;
bottom: 0; left: 0; width: 100%; height: 24px;
background: silver;
}
</style>
</head>
<!--[if lte IE 6]><body class="ie6"><![endif]-->
<!--[if gte IE 7]><!--><body><!--<![endif]-->
<div id="tools">...</div>
...
<script type="text/javascript">
// IE6 position: fixed fix
//
function fixFixed(element, isbottom) {
var root= document.compatMode==='CSS1Compat'? document.documentElement : document.body;
function setPosition() {
if (isbottom)
element.style.top= (root.scrollTop+root.clientHeight-element.offsetHeight)+'px';
else
element.style.top= root.scrollTop+'px';
}
element.style.position= 'absolute';
window.attachEvent('onscroll', setPosition);
window.attachEvent('onresize', setPosition);
window.setInterval(setPosition, 5000);
}
if (document.body.className==='ie6')
fixFixed(document.getElementById('tools'), true);
</script>
</body></html>