Bootstrap Plugin To Freeze Table Header While Scrolling - decapitate

decapitate.js is a very small jQuery plugin that uses Bootstrap's affix component to fix the table <thead> to the top when you scroll down the webpage.

How to use it:

1. Load the needed jQuery library and Bootstrap's affix.js plugin in the webpage.

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

2. Load the jQuery decaptitate.js script after jQuery.

<script src="jquery.decapitate.js"></script>

3. The required CSS styles.

/* Allow elements to be absolutely positioned within this container */

.decap-body-wrapper { position: relative; }

/* Pin the table header wrapper to the top of the viewport */

.decap-head-wrapper {
  position: fixed;
  top: 0;/* left: 0;   // should be supplied by designer (equal to body margin) */
    /* right: 0;  // should be supplied by designer (equal to body margin) */
}

/* Hide the cloned table header until it hits the top of the viewport */
/* Can't use `display: none` because we need the element to occupy its full height */

.decap-head-wrapper.affix-top .decap-head { visibility: hidden; }

/* Position the cloned table header relative to the last row of the table */

.decap-head-wrapper.affix-bottom {
  position: absolute;
  top: inherit;
  left: 0;
  right: 0;/* bottom: 0;  // should be supplied by designer (equal to height of last table row) */
}

4. Call the function decapitate() on your html table and done.

$('table').decapitate();

---

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