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.

Mon 2007.02.26 [ Internet Explorer, Javascript, css ]

6 Responses to “Faking css position: fixed in Internet Explorer 6”

  1. skeptic Says:
    May 29th, 2007 at 23:27:55

    Can yo7u please provide a demo page so we can see if this really works? Thank you.

  2. jordoncm Says:
    May 31st, 2007 at 14:03:08

    Thanks for the comment. You can test this script yourself by simply copying and pasting the compsite code from the bottom of the article into your own file and then adding in some br’s.

    Click here to see an example I put up.

    Basically, what it is doing is if you are using IE6; the script is testing to see if the page has been scrolled ten times a second and then moving the div accordingly.

  3. Wahoo Says:
    October 6th, 2007 at 14:42:15

    Thank you for sharing!

  4. kittah Says:
    July 9th, 2008 at 07:29:06

    brill :)

  5. sastro Says:
    August 20th, 2008 at 09:50:18

    Dude, only working with IE6 for a while. When you move the scroll bar over and over again, then the possision will follow the scroll bar. You should click the page again than fixed again.
    But thx anyway.

  6. jordoncm Says:
    August 20th, 2008 at 21:44:43

    Yeah if you are scrolling very quickly the Javascript that moves the div will be choppy. But that is about as good as it gets with IE6.

    One thing you could try to make it a little smoother is to reduce the setInterval from 100 to something lower. 100 means it is correcting the position of the div ten times a second. You could drop that to 10 and have it run one hundred times a second, but the likelihood of getting that performance in practice is really low.

    I know there are some other approaches to this problem out there, but I don’t know how well they work.

Leave a Reply

{
}