Faking Fixed Position in IE6

问题

I have a site that utilizes a bottom fixed position masthead here: http://www.entheospartners.com/newsite/

This setup works great in all browsers except IE6, which doesn't support fixed positioning in the least, so here's what I've done:

When an IE6 user comes to the page, I make the determination if scrolling is necessary using this bit of code:

var windowHeight = $(window).height();
var totalHeight = windowHeight - 100; // where 100 is the sum of the top nav height + footer height
var contentHeight;

if($('#subpage-content-small').length) { // main content div for a three column layout
    contentHeight = $('#subpage-content-small').height();
};

if($('#subpage-content-wide').length) { // main content div for a two column layout
    contentHeight = $('#subpage-content-wide').height();
};

if(contentHeight > totalHeight) {
    $('#container-container').css({
        'overflow-y' : "scroll",
        'height' : totalHeight
    });
};

...which calculates everything correctly, puts the scrollbars where they need to be (flush right), and sets them to the appropriate height. The problem is that the scrollbars don't move the content. I can't say that I've ever seen anything quite like this before, so I'm hoping someone else on here has. Thanks in advance!

PS - Obviously, this needs to be looked at in IE6 for troubleshooting, which I know will be as painful for you as it is for me.

UPDATE

After a little more digging on CSS expressions, based on the first answer, I came to a solution that works for fixed positioning the menu to the TOP of the page. All I need is to be able to use this and apply it to the bottom of the page. It's not as simple as switching all "top"s to "bottom"s, so I'm hoping someone can enlighten me. Here's the CSS:

#divfixed { 
    position: absolute; 
    top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); 
    left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');}

回答1:

You can you use CSS expressions. THe code below has been copied from here.

fixme {
  /* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
  position: absolute; right: 20px; bottom: 10px;
}
body > div#fixme {
  /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab,     ICEbrowser */
  position: fixed;
}
</style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#fixme {
  /* IE5.5+/Win - this is more specific than the IE 5.0 version */
  right: auto; bottom: auto;
  left: expression( ( -20 - fixme.offsetWidth + ( document.documentElement.clientWidth ?     document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 =     document.documentElement.scrollLeft ? document.documentElement.scrollLeft :     document.body.scrollLeft ) ) + 'px' );
  top: expression( ( -10 - fixme.offsetHeight + ( document.documentElement.clientHeight     ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe =     document.documentElement.scrollTop ? document.documentElement.scrollTop :     document.body.scrollTop ) ) + 'px' );
}
</style>
<![endif]>
<![endif]-->

回答2:

After more research based on CSS expressions, I came across a helpful jQuery plugin that is working perfectly for me: http://chrisiona.com/fixedposition/

I'm using a conditional to target IE6 and positioning the footer bar absolute bottom, then applying the fixedPosition plugin and it's working great. I can't envision too many other times I would be using this plugin, but hopefully it'll be able to help someone else out.

来源：https://stackoverflow.com/questions/2682989/faking-fixed-position-in-ie6

标签

javascript

jquery

internet-explorer-6

css