views:

34

answers:

0

I have 2 divs in fixed positions on my page, the idea being that their content scrolls when the page scrolls. However, when using Firefox, when there are lots of other DOM objects on the page, movement (especially vertical) is very jerky. Performance is fine in chrome and IE7/8. Code is shown below -

If anyone can point out ways this can be optimised or streamlined I would be most grateful!

I am binding my window scroll event like so;

$(document).ready(function()
{
   $(window).scroll(scrollMover);
});

Where scroll function is defined as

function scrollMover()
{        
    var offSets = getScrollXY();
    document.getElementByID('divA').scrollLeft = offSets[0];
    document.getElementByID('divB').scrollTop = offSets[1];

}

and

function getScrollXY()
{
var XOffset = 0, YOffset = 0;
if (typeof (window.pageYOffset) == 'number')
{
    //Netscape compliant
    YOffset = window.pageYOffset;
    XOffset = window.pageXOffset;
} else if (document.body && (document.body.scrollLeft || document.body.scrollTop))
{
    //DOM compliant
    YOffset = document.body.scrollTop;
    XOffset = document.body.scrollLeft;
} else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop))
{
    //IE6 standards compliant mode
    YOffset = document.documentElement.scrollTop;
    XOffset = document.documentElement.scrollLeft;
}
return [XOffset, YOffset];
}

Here's a Live Example unfortunately it's a bit useless as the page has no scrollbars! ;)

Edit: here's an Updated Example, complete with scroll bars! kindly provided by fudgey.