Lightweight JavaScript Library For Sticky Table Header – lrStickyHeader

lrStickyHeader is an easy and lightweight JavaScript library that makes you table’s thead stick to the top of the webpage when scrolling down.

Basic usage:

Download and include the lrStickyHeader.js script on the webpage.

<script src="lrStickyHeader.js"></script>

Stick the header of a specific table to the top as you scroll down the page.

var tables = document.getElementsByTagName('table');
lrStickyHeader(tables);

This will add a class ‘lr-sticky-header’ to the table’s header so that it can be styled whatever you like in the CSS.

.lr-sticky-header {
  color: white;
  background: #C0392B;
  transition: all 0.6s;
}

Changelog:

08/01/2018

• Fixes putting thead back in scrollable panel