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.