Picnic Website Code Tutorials

Position Fixed in IE6 With No Jitter or Jumping Tutorial

Here is a working example.

IE6 does not understand the css rule position fixed. However, you can use an IE expression to simulate position fixed in IE6. Most shy away from this because of the jumpy and jittery effect that comes along with it (JS is not a fast language). Well, no more! Simply add this fake image to the html tag as shone below, and it will make IE6 have to recalculate each time before it scrolls the page. Therefore your position fixed element will be as smooth as butter!

IE expressions don't validate, so I like to put them in a seperate ie6.css. Alternativly, you can place them in the <head>, or feed them to IE6 with the * html hack - whatever floats your boat. Here are all three methods to feed specific rules to IE6.

html { /* keeps the nav from jumping in IE6 */
background-image:url(fake-image.jpg); /* use a fake image */
}
#nav { 
position:absolute; /* position fixed for IE6 */
top:expression(115+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); 
left:expression(35+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
} 
		

Sponsors

Top Donators

Friends of Mine