JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr class="head" id="itemheader">
<th>xgdf</th>
<th>fsdfd</th>
</tr>
<tr>
<td>asdasd</td>
<td>asdsad</td>
</tr>
<tr>
<td>asdasd</td>
<td>asdsad</td>
</tr>
<tr>
<td>asdasd</td>
<td>asdsad</td>
</tr>
<tr>
<td>asdasd</td>
<td>asdsad</td>
</tr>
<tr>
<td>asdasd</td>
<td>asdsad</td>
</tr>
<tr>
<td>asdasd</td>
<td>asdsad</td>
</tr>
<tr>
<td>asdasd</td>
<td>asdsad</td>
</tr>
<tr>
<td>asdasd</td>
<td>asdsad</td>
</tr><tr>
<td>asdasd</td>
<td>asdsad</td>
</tr><tr>
<td>asdasd</td>
<td>asdsad</td>
</tr><tr>
<td>asdasd</td>
<td>asdsad</td>
</tr><tr>
<td>asdasd</td>
<td>asdsad</td>
</tr>
<tr>
<td>asdasd</td>
<td>asdsad</td>
</tr>
<tr>
<td>asdasd</td>
<td>asdsad</td>
</tr>
<tr>
<td>asdasd</td>
<td>asdsad</td>
</tr><tr>
<td>asdasd</td>
<td>asdsad</td>
</tr><tr>
<td>asdasd</td>
<td>asdsad</td>
</tr><tr>
<td>asdasd</td>
<td>asdsad</td>
</tr>
<tr>
<td>asdasd</td>
<td>asdsad</td>
</tr>
<tr>
<td>asdasd</td>
<td>asdsad</td>
</tr>
<tr>
<td>asdasd</td>
<td>asdsad</td>
</tr>
<tr>
<td>asdasd</td>
<td>asdsad</td>
</tr>
<tr>
<td>asdasd</td>
<td>asdsad</td>
</tr>
<tr>
<td>asdasd</td>
<td>asdsad</td>
</tr>
<tr>
<td>asdasd</td>
<td>asdsad</td>
</tr>
<tr>
<td>asdasd</td>
<td>asdsad</td>
</tr>
<tr>
<td>asdasd</td>
<td>asdsad</td>
</tr><tr>
<td>asdasd</td>
<td>asdsad</td>
</tr><tr>
<td>asdasd</td>
<td>asdsad</td>
</tr>
<tr>
<td>asdasd</td>
<td>asdsad</td>
</tr>
<tr>
<td>asdasd</td>
<td>asdsad</td>
</tr><tr>
<td>asdasd</td>
<td>asdsad</td>
</tr><tr>
<td>asdasd</td>
...
CSS
.stucky
{
-webkit-transform: translateZ(0);
z-index: 1;
position: fixed;
top: 0;
width: 100%;
height: 100%;
}
JavaScript
$(document).ready(function () {
var head = document.getElementById("itemheader");
var stick = head.offsetTop;
window.onscroll = function() { movehead(head, stick);};
});
function movehead(head, stick)
{
if(window.pageYOffset >= stick)
{
head.classList.add("stucky");
}
else
{
head.classList.remove("stucky");
}
}