jQuery Plugin For Sticky Table Headers

StickyTableHeaders is a lightweight and useful jQuery plugin that makes your table thead elements sticky as the page scrolls down. It is good for a long list of fairly uniform tabular data.

Installation:

# NPM
$ npm install sticky-table-headers --save

# Bower
$ bower install sticky-table-headers --save

Basic Usage:

1. Include jQuery library and StickyTableHeaders plugin before </body> tag of your page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> 
<script src="../js/jquery.stickytableheaders.js" type="text/javascript"></script> 

2. Markup html structure

<table>
<thead>
<tr>
<th colspan="3"> Companies listed on NASDAQ OMX Copenhagen. </th>
</tr>
<tr>
<th> Full name </th>
<th> CCY </th>
<th> Last </th>
</tr>
</thead>
<tbody>
<tr>
<td> A.P. Møller... </td>
<td> DKK </td>
<td> 33,220.00 </td>
</tr>
<tr>
...
</tr>
...
</tbody>
</table>

3. Initialize the plugin

$(document).ready(function () {
$("table").stickyTableHeaders();
});

4. Available options.

// the offset from the top of the page
fixedOffset: 0,

// the offset from the left side of the page
leftOffset: 0,

// top margin
marginTop: 0,

objDocument: document,
objHead: 'head',
objWindow: window,

// A DOM element or jQuery object. 
// Allows you to overwrite which surrounding element is scrolling. 
scrollableArea: window,

cacheHeaderHeight: false,
zIndex: 3

5. Available events.

$("table").stickyTableHeaders()

.on('clonedHeader.stickyTableHeaders', function(){
  // when the clone is created
})

.on('enabledStickiness.stickyTableHeaders', function(){
  // when enabled
})

.on('disabledStickiness.stickyTableHeaders', function(){
  // when disabled
})

More example:

• With Bootstrap Example
• Border Collapse Example
• Offset Example
• Basic Example
• With Table Sorter Example

Change logs:

v0.1.24 (2018-01-15)

• update.

v0.1.16 (2015-05-22)

• Rename events and add example
• Tinymce/Iframe support - Adding options to allow users to overwritte window, document and head

v0.1.15 (2015-03-06)

• update.

v0.1.13 (2014-10-25)

• update.

v0.1.12 (2014-09-01)

• update.

v0.1.11 (2014-05-29)

• update.

v0.1.10 (2014-05-28)

• bug fixed.

v0.1.9 (2014-04-05)

• bug fixed.

v0.1.7 (2013-11-22)

• emitting event after cloning header.

v0.1.6 (2013-09-19)

• updated to the latest version

v0.1.4 (2013-08-06)

• fixing jshint errors and minifying

---

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