fixed/sticky header and left columns for tables
Look at html/index.html for usage.
A demo is located here hgsweb.de/floater
This is achieved by using copies of the table header, all the left columns and the top left corner, as a header for the left columns.
These elements are then placed on top or to the left of the table, using a style.position value of 'fixed' or 'absolute' , depending on the element and scroll direction.
For details regarding usage and implementation please see files index.html and float.js
A very simple overview is located at Slides.com
Added functionality to keep frozen and columns headers in sync with content and geometry changes inside related table cells.
As of 07.01.2015 this has been working for :
IE , Chrome FireFox Opera
There are three main block of logic.
The first block is the construction of three containers to build the header (theHeader) , the top left corner (theLeftCorner) being the left part of theHeader and the header for the fixed left columns (theLeftColumns).
The second block keeps track of horizontal and vertical scrolling of the table. If the original table header, or the left columns (if specified) are about to be moved out of sight some or all of the above containers will be displayed instead.
When scrolling verticaly the position value for theHeader and theLeftCorner will change to fixed so they will stay in view. The position value of theLeftColumns will be set to absolute so it will scroll verticaly.
When scrolling horizontaly the position value for theLeftColumns and theLeftCorner will change to fixed so they will stay in view. The position value of theHeader will be set to absolute so it will scroll horizontaly.
To visualise this somehow look at an other demo page trying to show these positional changes
The third block is to synchronize all three container if any changes to the table layout happens, or the position of the table within the document changes.