jQuery Plugin To Fix Table Headers And Columns - Sticky.js

Yet another jQuery sticky table plugin that has the ability to fix a specific number of headers and columns within your large html table.

How to use it:

1. Just place the main JavaScript file sticky.js after jQuery library and the plugin is ready for use.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="src/sticky.js"></script>

2. Call the plugin to make the table header sticky on page scroll. Note that the table cells must have a fixed width and height you can specify in the javascript as follow:

$('table' ).sticky( {
  cellWidth : 60,
  cellHeight: 20,
});

3. Specify the first x columns to be fixed on page scroll.

$('table' ).sticky( {
  cellWidth : 60,
  cellHeight: 20,
  columnCount : 2
});

4. Set the top/left offsets in pixels when the table headers and columns get sticky.

$('table' ).sticky( {
  cellWidth : 60,
  cellHeight: 20,
  columnCount : 2,
  offset: { top: 0, left: 0 },
});

5. Specify the scrollable container.

$('table' ).sticky( {
  cellWidth : 60,
  cellHeight: 20,
  columnCount : 2,
  scrollContainer : window,
});

6. The plugin will automatically add the following CSS classes to the table elements when they get sticky.

$('table' ).sticky( {
  cellWidth : 60,
  cellHeight: 20,
  columnCount : 2,
  headerCssClass : 'sticky-header',
  columnCssClass : 'sticky-column',
  cornerCssClass : 'sticky-corner',
  tableCssClass: 'table-non-sticky',
});

---

This awesome jQuery plugin is developed by configit. For more Advanced Usages, please check the demo page or visit the official website.