JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<table id="hitchcock">
    <thead>
        <tr><th colspan="3">position 1 header</th></tr>
        <tr><th>title</th><th>author</th></tr>
    </thead>
    <tbody>
        <tr><td>The 39 Steps</td><td>Alfred Hitchcock</td><td>1935</td></tr>
        <tr><td>Rebecca</td><td>Alfred Hitchcock</td><td>1940</td></tr>
        <tr><td>Notorious</td><td>Alfred Hitchcock</td><td>1946</td></tr>
        <tr><td>Rope</td><td>Alfred Hitchcock</td><td>1948</td></tr>
        <tr><td>Strangers on a Train</td><td>Alfred Hitchcock</td><td>1951</td></tr>
        <tr><td>Vertigo</td><td>Alfred Hitchcock</td><td>1958</td></tr>
        <tr><td>Psycho</td><td>Alfred Hitchcock</td><td>1960</td></tr>
        <tr><td>The Birds</td><td>Alfred Hitchcock</td><td>1963</td></tr>
        <tr><td>The 39 Steps</td><td>Alfred Hitchcock</td><td>1935</td></tr>
        <tr><td>Rebecca</td><td>Alfred Hitchcock</td><td>1940</td></tr>
        <tr><td>Notorious</td><td>Alfred Hitchcock</td><td>1946</td></tr>
        <tr><td>Rope</td><td>Alfred Hitchcock</td><td>1948</td></tr>
        <tr><td>Strangers on a Train</td><td>Alfred Hitchcock</td><td>1951</td></tr>
        <tr><td>Vertigo</td><td>Alfred Hitchcock</td><td>1958</td></tr>
        <tr><td>Psycho</td><td>Alfred Hitchcock</td><td>1960</td></tr>
        <tr><td>The Birds</td><td>Alfred Hitchcock</td><td>1963</td></tr>
    <tbody>    
</table>
        
<table id="allen">
    <thead>
        <tr><th colspan="3">position header 2 ></th></tr>
    </thead>
    <tbody>
        <tr><td>What's Up, Tiger Lily</td><td>Woody Allen</td><td>1966</td></tr>
        <tr><td>Sleeper</td><td>Woody Allen</td><td>1973</td></tr>
        <tr><td>Annie Hall</td><td>Woody Allen</td><td>1977</td></tr>
        <tr><td>Manhattan</td><td>Woody Allen</td><td>1979</td></tr>
        <tr><td>Bullets Over Broadway</td><td>Woody Allen</td><td>1994</td></tr>
        <tr><td>Sweet and Lowdown</td><td>Woody Allen</td><td>1999</td></tr>
        <tr><td>Match Point</td><td>Woody...

CSS

body {
    font-family:'Lucida Grande', 'Lucida Console', sans-serif;
    margin:0;
    padding:0;
}
table {
    width:100%;
    border-collapse:collapse;
    margin:0 0 18px;
}
th {
    padding:4px;
    text-align:center;
    background-color:#000;
    color:#fff;
    border:1px solid #000;
    width:33%;
}
td {
    padding:4px;
    border:1px solid #000;
}
#header {
    position:fixed;
    top:0;
    left:0;
}
#header th {
    background:#c00;
}

JavaScript

$(function() {
    addNewHeader('hitchcock');
    $(document).scroll(function(e) {
        $('table:not(#header)').each(function(i, table) {
            var scrollAmount = $(document).scrollTop(),
                thisTable = $(table),
                tablePosition = thisTable.position().top;
            if (tablePosition < scrollAmount) addNewHeader(thisTable.attr('id'));
        });
        
    });

});

function addNewHeader(id) {
    var header = $('#'+id).children('thead').clone(),
        headerTable = $(document.createElement('TABLE')).attr('id','header').append(header);
    $('#header').remove();
    $('#'+id).before(headerTable);    
}