jQuery Plugin For Sticky Table Headers

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.


$ 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

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

3. Initialize the plugin

$(document).ready(function () {

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.

.on('clonedHeader.stickyTableHeaders', function(){
  // when the clone is created
.on('enabledStickiness.stickyTableHeaders', function(){
  // when enabled
.on('disabledStickiness.stickyTableHeaders', function(){
  // when disabled

More example:

Change logs:

v0.1.24 (2018-01-15)

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.

  • Publication date: 15.01.2018
  • Source