Faking Fixed Position in IE6
- by Andrew
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.
