IE - How to simulate fixed positioning in IE6
http://plugins.jquery.com/project/FixedIE
Using JavaScript:
(function($) {
var previousScrollOffset_vertical = $(window).scrollTop();
var previousScrollOffset_horizontal = $(window).scrollLeft();
$(window).scroll(function(event) {
var currentScrollOffset_vertical = $(window).scrollTop();
var currentScrollOffset_horizontal = $(window).scrollLeft();
var diff_vertical = currentScrollOffset_vertical - previousScrollOffset_vertical;
var diff_horizontal = currentScrollOffset_horizontal - previousScrollOffset_horizontal;
previousScrollOffset_horizontal = currentScrollOffset_horizontal;
previousScrollOffset_vertical = currentScrollOffset_vertical;
$('.simulatePositionFixed').each(function() {
var el = $(this);
var t = el.css('top');
var l = el.css('left');
t = t + diff_vertical;
l = l + diff_horizontal;
el.css({'top': t, 'left': l});
});
});
})(jQuery);
The above code only support fixed position vertically. To use the above code, you must add class="simulatePositionFixed" to the element, and you must load the above script:
<!--[if IE 6]>
<script type='text/javascript' src='URL for the script'></script>
<![endif]-->
This code has limitation (because it uses javascript): it is jumpy. We maybe able to prevent IE from being jumpy by:
<!--[if IE 6]>
<style type="text/css">
body {
background: url(foo) fixed;
}
</style>
<![endif]-->
or
<!--[if IE 6]>
<style type="text/css">
body {
background: url(data:null) fixed;
}
</style>
<![endif]-->
Using CSS expression:
<!--[if IE 6]>
<style type="text/css">
html {
/* use a fake image to prevent IE6 from being jumpy */
background-image:url(fake-image.jpg);
}
.simulatePositionFixed {
position:absolute;
top:expression(115+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left:expression(35+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}
</style>
<![endif]-->
See also:
http://www.howtocreate.co.uk/fixedPosition.html
http://www.visibilityinherit.com/code/ie6-position-fixed.php
Other approaches:
http://www.cssplay.co.uk/layouts/fixed.html
http://ryanfait.com/resources/fixed-positioning-in-internet-explorer/
page revision: 0, last edited: 14 Apr 2012 14:41