JSFiddle - React, Tailwind, and code Playground

HTML

<table id="mytable" width="100%">
    <thead>
        <tr class="scroll">
            <th width="20%">Id</th>
            <th width="20%">Value</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td align="center" width="20%">0</td>
            <td align="center" width="20%">1</td>
        </tr>
        <tr>
            <td...

JavaScript

var num = 5;
$(document).bind('scroll', function () {
    if ($(document).scrollTop() > num) {
		$('.scroll').css({'position':'fixed', 'top':'0px'});
    } else {
        $('.scroll').css({'position':'', 'top':''});
    }
});