Creating a fixed header (not specific to ActiveWidgets)

I'm trying to make a treegrid control using Javascript, and the ActiveWidgets grid is a big influence. I was wondering if you could help me out with something i've been having trouble with for a few days now.

What I'd like to do is make a fixed column header row like there is in AW that doesn't scroll if scrolled vertically, but moves along with the rest of the data when scrolled horizontally. I have tried to take a look at the source you so gracefully provide, but I had no luck.

Can anyone at least point me in the right direction?

Thanks!

The scrolling script in AW might be overkill for this but if you want to look - it is in /source/lib/templates/scroll.js

Actually you just have to listen to onscroll event in one DIV and modify scrollLeft/scrollTop properties of another...

First of all, thanks a lot for your help; I really appreciate it and it shows that you're committed to your userbase, which is awesome :).

I tried looking at that page, and I think i understand how it works, but I can't replicate it myself. What i've got is a container div (which has the CSS property overflow: auto to make the scrollbars) and two inner divs (header and contentArea). On the onscroll event on container, I edit the scrollTop and scrollLeft attributes of the other two, but the header div still moves vertically.

Any ideas what I might be doing wrong?

Probably you should attach onscroll event listener to the container area and adjust scrollLeft property of the header. You should configure your content area to have overflow: auto (not container).

Thank you very much; it's working perfectly now! :)

what the hell is an on scroll event listener?