fixed.js – Solution to IE6 “position:fixed” Bug

IE6 has been a bane for all frontend developers for years. An element can be positioned relative to the browser window using the style position:fixed, it does not move when the page is scrolled. You can do nice layout things (e.g. facebook chat bar) with this in most modern browsers but not for IE6 in windows until you use fixed.js

Sample Code for Facebook Type Chat Bar

<html>
  <head>
    <style type="text/css">
      body {
        margin:0px;
        padding:0px;
        height:1600px;
        position:relative;
      }
      #shoutbox {
        position:fixed;
        background-color:#F2F2F2;
        border-top:1px solid #CCCCCC;
        bottom:0px;
        left:0px;
        width:100%;
        height:25px;
      }
    </style>
    <script type="text/javascript" src="fixed.js"></script>
  </head>
  <body>
    <div id="shoutbox">
      <!-- Our Shoutbox -->
    </div>
  </body>
</html>

The above code will show you a bar at the bottom of the page, which remains fixed at the bottom even if you scroll the page.

How does fixed.js help me?

  1. fixed.js is smart enough to invoke only if the browser is IE6 on Windows machine. This is achieved by these two lines of code in fixed.js.
    /*@cc_on
    @if (@_win32 && @_jscript_version>4)
  2. It specifically tells IE6 how to render elements with position:fixed attributes. Which are otherwise ignored by IE6.
  3. For remaining browsers, fixed.js go to sleep silently. Doesn’t do any processing.

Download fixed.js
fixed.js is developed and maintained at doxdesk.com. Click here to download fixed.js

Happy Coding!

  • Amit

    Is it just me or this code doesn’t work in IE7.0??

  • I am not sure for IE7, i didn’t test thid on IE7. Gut feeling is it should work, but will chk and comment back.

    • Works in ie6 and 7 for me, great hack, thanks for sharing

  • This is just awesome, better than any other fixes out there. Worked perfectly without touching any CSS. Thanks again!