Lightweight JavaScript Library For Sticky Table Header – lrStickyHeader

Category: Javascript , Table | August 1, 2018
Author: lorenzofox3
Views Total: 3,471
Official Page: Go to website
Last Update: August 1, 2018
License: MIT

Preview:

Lightweight JavaScript Library For Sticky Table Header – lrStickyHeader

Description:

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

You Might Be Interested In:

One thought on “Lightweight JavaScript Library For Sticky Table Header – lrStickyHeader

  1. Arun kumar

    Hi AUTHOR,

    Thanks for sharing this awesome code.I have done little modification in this code as per my requirement i added 5 html table, it’s working fine in (LINIX)Ubuntu systems. but when i test this on windows system ,then last table header is not scroll up it’s back down when reached at window top. please help me.

    Thanks

    Reply

Leave a Reply