Question

I have a table with a fixed header: http://dev.driz.co.uk/table/

What I want to do is when the user scrolls .uiGridContent it will move the .uiGridHeader in accordance so if I scrolled right 50px then the header would move left 50px so that the grids still match up.

How would I do this with jQuery?

Answer 1

Use the Scroll event and the scrollLeft getter/setter

$('.uiGridContent').scroll(function() {
    $('.uiGridHeader').scrollLeft($('.uiGridContent').scrollLeft());
});

example here

tip:

change the padding-left of the header into margin-left to eliminate the error on the end of the scrolling

div.uiGridHeader
{
    height: 28px;
    margin-right: 17px;
    border: #ccc 1px solid;
    border-width: 0 0 1px 0;
    background: -webkit-linear-gradient(#fff,#ddd);
    border-radius: 3px 3px 0 0;
    overflow: hidden;
}

example 2 here