Faking css position: fixed in Internet Explorer 6
This is a trick that I have been doing for some time, but now that Internet Explorer 7 is out and it supports position fixed in css; I think this trick will been even more useful now that it will allow web developers to take better advantage of css and at the same time not leave out the Internet Explorer 6 user base. I am posting this here because I sent this to a friend a couple days ago and thought others might be able to use it as well.
The trick is really quite basic. For simplicity I am just putting this example inline, but you can put it where you want.
First your declare your intended style for IE7 (and basically every other browser):
<style type="text/css">
#fixed_div {
position: fixed;
top: 0px; /* tweak this according to placement */
left: 0px; /* tweak this according to placement */
/* add additional styling, etc. */
}
</style>
Second add in your Javascript function which is going to be doing your movement for IE6:
<script type="text/javascript">
function move_box() {
var offset = 0; // set offset (likely equal to your css top)
var element = document.getElementById('fixed_div');
element.style.top = (document.documentElement.scrollTop + offset) + 'px';
}
</script>
Then declare the element itself:
<div id="fixed_div">I am fixed, even in IE6</div>
Lastly, implement your fix for IE6 only:
<!--[if lt IE 7]>
<style type="text/css">
#fixed_div {
position: absolute;
top: 0px; /* tweak this according to placement */
left: 0px; /* tweak this according to placement */
}
</style>
<script type="text/javascript">
window.setInterval(move_box, 100);
</script>
<![endif]-->
I usually put this last part right before the end of the body (I guess you could just put the whole script there). This is because you don’t want the window.setInterval to fire before your fixed div is declared. You could use the body onload but I try to stay away from that because I know it is popular for other uses on more advanced pages and I don’t want to run the risk of interfering.
Here is the whole script put together:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
. . .
<style type="text/css">
#fixed_div {
position: fixed;
top: 0px; /* tweak this according to placement */
left: 0px; /* tweak this according to placement */
/* add additional styling, etc. */
}
</style>
<script type="text/javascript">
function move_box() {
var offset = 0; // set offset (likely equal to your css top)
var element = document.getElementById('fixed_div');
element.style.top = (document.documentElement.scrollTop + offset) + 'px';
}
</script>
. . .
</head>
<body>
. . .
<div id="fixed_div">I am fixed, even in IE6</div>
. . .
<!--[if lt IE 7]>
<style type="text/css">
#fixed_div {
position: absolute;
top: 0px; /* tweak this according to placement */
left: 0px; /* tweak this according to placement */
}
</style>
<script type="text/javascript">
window.setInterval(move_box, 100);
</script>
<![endif]-->
</body>
</html>
NOTE: This will only work properly on pages that have a valid doctype definition. If you don’t use one [you should start or] you need to change document.documentElement.scrollTop to document.body.scrollTop in the move_box function.
You can also modify this script to apply to multiple elements by passing arguments to the function or something similar. If you are doing multiple elements on a single page, you may want to consider setting up some kind of Javascript array that tracks what elements need to be corrected, this could save you from having multiple window.setInterval instances running.