JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Flexible header test</h1><hr>

<p>Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. </p><hr>

<table class="flexitable" border="1" width="500">
    <tr class="flexitr">
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
</table>

<p>Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test data. Some test...

CSS

.flexitable td, .flexiholder td {
    padding: 5px;   
}
.flexitr {
    background-color: #bbb;   
}
.flexiholder {
    position: fixed;
    top: 0;
    left: 0;
    width: 100;
    display: none;
}

JavaScript

var fhHeight = 0;
var ft = $('.flexitable');
var fhold = $('.flexiholder');
var win = $(window);

$(window).scroll(function() {
    
    var ftr = $('.flexitr');
   
    if(fhHeight==0 && (ft.offset().top - win.scrollTop()) <= 0 &&
           !ftr.parent().hasClass('flexiholder')) {
        fhHeight = ftr.height();
        ftr.appendTo(fhold);
        fhold.show();
    }
    else if(fhHeight!=0 && fhHeight!=-1 &&
            (ft.offset().top - win.scrollTop() > fhHeight || 
             ft.offset().top + ft.outerHeight(true) - win.scrollTop() < 0))  {
        if(ft.offset().top + ft.outerHeight(true) - win.scrollTop() < 0) {
            fhHeight = -1;
        }
        else {
            fhHeight = 0;
        }
        ftr.prependTo(ft);
        fhold.hide();
    }
    else if(fhHeight==-1 && ft.offset().top + ft.outerHeight(true) - win.scrollTop() > 0) {
        fhHeight = 0;
    }
    
});