Make header and a left column stick when scroll large tables.
Usage
This basic usage will make the headers of the table stick.
$('table').sticky();
This will attach an event handler to the window.scroll to detach that call
$('table').sticky('unstick');
To get sticky columns must specify how many columns to stick, the following example will stick the first 2 columns
$('table').sticky( {columnCount:2} );
Options
The sticky plugin supports the following options
Name
Default
Description
offset
{ top: 0, left: 0 }
Offset of fixed top and fixed left position. Specify these to change where the fixed header and column will start.
Offset may be specified as an array, like so: <code>[{width:900, top:0, left:0}, {top:40,left:0}]</code>. This will make the stickyheader responsive, so that top:0 is used in windows widths smaller than 900 and top:40 as default. </td> </tr> <tr> <td>scrollContainer</td> <td>window</td> <td>Which container should scroll. </td> </tr> <tr> <td>headerCssClass</td> <td>'sticky-header'</td> <td>css class of the sticky header</td> </tr> <tr> <td>columnCssClass</td> <td>'sticky-column'</td> <td>css class of the sticky column</td> </tr> <tr> <td>cornerCssClass</td> <td>'sticky-corner'</td> <td>css class of the sticky corner</td> </tr> <tr> <td>columnCount</td> <td>0</td> <td>How many columns should stick</td> </tr> <tr> <td>cellWidth</td> <td>60</td> <td>How wide are the cells</td> </tr> <tr> <td>cellHeight</td> <td>20</td> <td>How tall are the cells</td> </tr> <tr> <td>cellCount</td> <td>-1</td> <td>How many cells are there in a row. Will be calculated based on first row if -1</td> </tr>
Limitations
The table cells must have a fixed width and height. That can be specified with the cellWidth and cellHeight options.
The table cannot change position, e.g. get more margin after .sticky function has been applied.
