Sticky header for table

Question

I am trying to create a sticky header for table on user scroll. I wrote it and it works, but looks like width of the table elements doesn't work as expected.

https://jsfiddle.net/fj8rtq0g/5/

My JS code is here:

window.onload = function() {
  elementsHead = document.querySelectorAll("#result_list thead tr th");
  elementsHead[0].width = document.querySelector("#result_list tbody tr:first-child th").offsetWidth;

  elementsFirstRowBody = document.querySelectorAll("#result_list tbody tr:first-child td");

  for (i = 0; i < elementsHead.length; i++) {
    if (i >= 1) {
      elementsHead[i].width = elementsFirstRowBody[i-1].offsetWidth;
    }
  }

}

window.onscroll = function() {
  addSticky();
};

function addSticky() {
  var navbar = document.getElementById("result_list");
  var sticky = navbar.getBoundingClientRect().top;
  if (sticky < 0) {
    navbar.classList.add("sticky");
  } else {
    navbar.classList.remove("sticky");
  }
}

My css code is here:

.sticky thead tr {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    background: red;
}

Can someone suggest how to fix this problem? I am using pure javascript.

Answer 1

Set the "tr" to top: 0 and left: 0 width: 100% and add padding for spacing 20px.

.sticky thead tr {
    position: fixed;
    top: 0;
    left: 0;
    padding: 20px;
    width: 100%;
    z-index: 100;
    background: red;
}

this will do the trick.

Answer 2

Here is my solution using position sticky I applied position:sticky to all th of the thead

Also I removed the javascript code responsible for sizing the columns, but retained the function, that adds color to the tr

 window.onload = function() { /* elementsHead = document.querySelectorAll("#result_list thead tr th"); elementsHead[0].width = document.querySelector("#result_list tbody tr:first-child th").offsetWidth; elementsFirstRowBody = document.querySelectorAll("#result_list tbody tr:first-child td"); for (i = 0; i < elementsHead.length; i++) { if (i >= 1) { elementsHead[i].width = elementsFirstRowBody[i-1].offsetWidth; } } */ } window.onscroll = function() { addSticky(); }; function addSticky() { var navbar = document.getElementById("result_list"); var sticky = navbar.getBoundingClientRect().top; if (sticky < 0) { navbar.classList.add("sticky"); } else { navbar.classList.remove("sticky"); } } 

 .sticky thead tr th { position: sticky; top: 0; background: red; } 

 <table id="result_list"> <thead> <tr> <th> Title </th> <th> Title 1 </th> <th> Title 2 </th> <th> Title 3 </th> <th> Title 4 </th> <th> Title 5 </th> <th> Title 6 </th> </tr> </thead> <tbody> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> <tr> <th> Demo </th> <td> Demo 1 </td> <td> Demo 2 </td> <td> Demo 3 </td> <td> Demo 4 </td> <td> Demo 5 </td> <td> Demo 6 </td> </tr> </tbody> </table>