Emulating position: fixed; in IE 6 & below
If you're new here, you may want to subscribe to my RSS feed.
A little background:
Internet Explorer 6 and below do not understand the CSS property and value position: fixed;. All the better browsers (IE7, Firefox/Mozilla, Safari, Opera) understand and apply this rule.
If you are unfamiliar with position: fixed; it basically makes an element stay in the same position on a page while the page is scrolled. When using position: fixed; you should set the position using a combination of top or bottom and left or right.
The CSS (with a splash of JavaScript):
#bar { width: 100px; height: 100px; background: red; z-index: 100; }
* html #bar { /*\*/position: absolute; top: expression((176 + (ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + 'px'); right: expression((20 + (ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)) + 'px');/**/ }
#foo > #bar { position: fixed; top: 176px; right: 20px; }
How it works:
1) The first line of CSS is the generic rules that apply to all browsers, in this case width, height, background and z-index.
2) The second line of the CSS is being applied only to IE6 and below by use of the * html filter/hack and it is being hidden from Mac/IE using the Tan Hack (/*\*/…/**/). A JavaScript expression is being used to determine where to place the element that needs to have a fixed position. You don’t need to change the expression at all other than making sure your numbers all match up (the highlighted areas).
3) The last line is for all the better browsers that already know how to handle position: fixed;. These rules are not applied to IE6 and below because we are using the child selector (#foo > #bar), which IE6 and below does not understand.
The most important things about this little fix are making sure your numbers (the highlighted numbers above) match up. If they don’t, your element will likely be in different positions in IE6 and below and all the better browsers.
This technique was found by Matt Siegler.This technique was adopted from http://www.howtocreate.co.uk/fixedPosition.html.
This technique was adapted by Chip Adams.
You can see this example by looking at the box to the right.
This is a box positioned smoothly to the right in all browsers.
(19 votes, average: 4.37 out of 5)
Loading ...
23 Comments
steve on March 15, 2007
It does work! very nice… although it scrolls like molasis in IE6. Good news is IE6 is a legacy browser now. Another 12mo. and dropping support for it will be considered normal.
Iiro Krankka on March 15, 2007
It seems that you’ve figured the same as I, but five days later. here’s my entry and the demo is here.
My version has not that much code but it works like yours.
brett on March 26, 2007
That fix makes me so happy.
Iiro’s fix does indeed have less code but doesn’t see to do anything in my situation. Not sure why. But the code you posted works great. Thanks.
Corey Green on May 23, 2008
“It does work! very nice… although it scrolls like molasis in IE6. Good news is IE6 is a legacy browser now. Another 12mo. and dropping support for it will be considered normal.”
Hah! I wish. :’(
reza on July 15, 2008
thanks…
satya on August 14, 2008
this code works great thanks a lot. saved me lot of time to research. web n blogz rock
coder on August 21, 2008
Thanks, the code works great, saved me a lot of time!
Andy on October 7, 2008
awesome, this technique works REALLY well if you’re using a fixed background image on the body.
kuswantin on November 7, 2008
I tried to create two fixed divs at the topmost and bottom. Trying to change scrollTop to scrollBottom doesn’t seem to help much. Any idea how?
Here’s the code:
“
#top, #bot{ width: 100px; height: 100px; background: #fff; z-index: 100; }
* html #top{ /*\*/position: absolute; top: expression((0 + (ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + ‘px’);/**/ }
* html #bot{ /*\*/position: absolute; bottom: expression((0 + (ignoreMe = document.documentElement.scrollBottom ? document.documentElement.scrollBottom : document.body.scrollBottom)) + ‘px’);/**/ }
.foo> #top{top: 0px; margin:0 auto 5px;}
.foo> #bot{bottom:0px;margin:0 auto;}
“
Thanks
Neo on November 8, 2008
Worked like a charm. The scroll is a little jerky, but that’s what you get for living in the past(IE6).
Thanks big-time, that saved me changing my layout.
Is there a way to smooth out the scrolling in IE6?
Senthil on November 12, 2008
Fantastic ! As Neo said, its bit jerky but Client is happy with this as they cannot upgrade to IE7 !
Will on December 9, 2008
My headache is gone!!!! thank you so much!!!
Nafas sait on December 21, 2008
Thanks for the script,but its not working smoothy ,its jurking……
Jen on January 13, 2009
@Nafas sait - Yep, it’s a lil jerky, but that’s IE6 for you.
Works like a charm! Thanks!!
Ron on February 6, 2009
Bug with IE …if you get a select tag with a size …. the select tag will bizardly drag.
praveen Vijayan on February 9, 2009
Thanks dude. Bit jerky but its working
yanxi on February 10, 2009
The jerking can’t be avoided as the javascript is recalculating the position everytime you scroll if I remember correctly.
Also facing the same problem as kuswantin. I’m trying to fix an image to the bottom. Any ideas anyone?
john on February 10, 2009
Hey yanxi, this site, http://www.gunlaug.no/contents/wd_additions_15.html, has a fix for align bottom images.
arti on April 10, 2009
* html #right {
position: absolute;
top: expression((0 + (ignoreMe1 = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + ‘px’);
left: expression((840 + (ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)) + ‘px’);
width: expression((0 + (ignoreMe3 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)) + ‘px’);
}
adnan on May 17, 2009
Thanks a lot!
I was searching for the solution for my facebook chat clone application http://facebookIM.com. It worked great.
Zoffix Znet on May 21, 2009
Instead of CSS expressions I’ve just MooTools’ set() function:
window.onscroll = function() {
$(’sub_cat_item_closer’).set( {
’styles’: {
‘top’: (window.getScroll().y + 200) + ‘px’
}
}
);
}
The jerking only happens when you’ve been scrolling one way (e.g. up) and then reversed the direction of the scroll. One-way scrolling is perfectly smooth as if IE6 supported position:fixed.
(and no, I’m not saying that you must use a full JS library for this; just my two cents for people who are already using it on the site)
David on June 3, 2009
Legend, thanks a million!
Niladri on June 10, 2009
Awesome!!!! Great hack