Stick Table Header To The Top When Scrolling Down - fixHeader

fixHeader is a super tiny jQuery plugin which sticks the table header to the top of the page when the user scrolls past the table thead element.

How to use it:

1. Download and insert the main JavaScript fixHeader.js after the latest jQuery library (slim build is recommended).

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
</script>
<script src="./src/fixHeader.js"></script>

2. Just add the CSS class fix_header_table to the HTML table and done. Note that your HTML table must have a thead element.

<table class="fix_header_table">
  <thead>
    <tr>
      <td>header1</td>
      <td>header2</td>
      <td>header3</td>
      <td>header4</td>
      <td>header5</td>
      <td>header6</td>
      <td>header7</td>
      <td>header8</td>
      <td>header9</td>
      <td>header10</td>
      <td>header11</td>
      <td>header12</td>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
        <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
    </tr>
    <tr>
        <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
        <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
    </tr>
    <tr>
        <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
        <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
    </tr>
    <tr>
        <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
        <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
    </tr>
    <tr>
        <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
        <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
    </tr>
    <tr>
        <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
        <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
    </tr>
    <tr>
        <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
        <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
    </tr>
    <tr>
        <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
        <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
    </tr>
    <tr>
        <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
        <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
    </tr>
    <tr>
        <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
        <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
    </tr>
    <tr>
        <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
        <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
    </tr>
    <tr>
        <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
        <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
    </tr>
    <tr>
        <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
        <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
    </tr>
    <tr>
        <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
        <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
    </tr>
    <tr>
        <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
        <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
    </tr>
    <tr>
        <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
        <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
    </tr>
    <tr>
        <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
        <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
    </tr>
    <tr>
        <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
        <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
    </tr>
    <tr>
        <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
        <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
    </tr>
    <tr>
        <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
        <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
    </tr>
    <tr>
        <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
        <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
    </tr>
    <tr>
        <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
        <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
    </tr>
    <tr>
        <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
        <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
    </tr>
    <tr>
        <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
        <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
    </tr>
    <tr>
        <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
        <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
    </tr>
  </tbody>
</table>

---

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