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/

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License