Navigation menu

Simulating fixed positioning in Internet Exploder

You can simulate fixed positioning in Internet Explorer 5 & 6 using JavaScript. For example, this code fixes the vertical position of the element with id “navigation”: 

// this is now obsolete, given http://james.crompton.eu/style/iefix.css:
function fixit( ieBody )
{
if ( ieBody.clientHeight >= navigation.scrollHeight
      || ieBody.scrollHeight <= ieBody.clientHeight )
   {
      navigation.style.top = ieBody.scrollTop ;
   }
   else
//      window is smaller than navigation. Avoid infinite
//      scrolling into nowhere by gradually moving it up:
   {
      navigation.style.top = ieBody.scrollTop
         - ( navigation.scrollHeight - ieBody.clientHeight )
            * ieBody.scrollTop
            / ( ieBody.scrollHeight - ieBody.clientHeight )
         - content.offsetTop      // = o.5em in pixels
            * ieBody.scrollTop
            / ( ieBody.scrollHeight - ieBody.clientHeight ) ;
   }
}

window.onload = function ()
{
   if ( navigation.currentStyle.position != "fixed" )   // maybe IE7+ will do fixed
   {
      var ieBody = ( navigator.appVersion.search ( 'MSIE 5' ) < 0 )
         ? document.documentElement : document.body ;
      window.onscroll = function()
         { fixit( ieBody ) ; }
      window.onresize = function()
         { fixit( ieBody ) ; }
   }
}

It would have been much quicker to work out how to do this, but Microsoft couldn't be bothered to document the fact that if you run their stupid browser in its latest version, it is no longer 'body.scrollTop' that tells you how far the window is scrolled up, as is implied by their helpful picture, but 'document.documentElement.scrollTop.' Unless you tell it to run in wierdo non-standard mode (known as 'quirks' mode to the Community of Developers and 'backwardly compatible' to the Evil Empire itself), in which case lots of other things are likely to explode.