JSFiddle - React, Tailwind, and code Playground

HTML

<table border=1>
<tr>
<th>見出し１</th>
<td>内容１</td>
</tr>

<tr>
<th>見出し２</th>
<td>内容２</td>
</tr>

<tr>
<th>見出し３</th>
<td>内容３</td>
</tr>



<div id="nav">
<tr>
<th>見出し３</th>
<td>内容３</td>
</tr>
test
</div>
</table>

CSS

body {
    height:3000px;
    
}

#nav {
    margin-top:100px;
    width:100%;
    height:30px;
    background:#CCC;
}
#nav.fixed {
    position: fixed;
    top:0;
    left:0;
    margin:0;
    z-index: 10000;
}

JavaScript

$(function(){
var $win = $(window),
    $nav = $('#nav'),
    navTop = $nav.offset().top;
    
    processScroll();

    $win.scroll(processScroll);
    
    function processScroll(){
      var i, scrollTop = $win.scrollTop();
      $nav.toggleClass('fixed', (scrollTop >= navTop));
    }
});