JSFiddle - React, Tailwind, and code Playground

HTML

<table id="row">
    <thead>
        <tr>
            <th>Foo!</th>
            <th>Barrr</th>
            <th>Moar!</th>
            <th>End of all things</th>
        </tr>
    </thead>       
</table>
<div class="top">blub</div>

CSS

th, td{
    width: 110px;
}

.odd {
    background-color: red;
}

.event {
    border: 1px solid #000;
}

.swGroupLink {
    background-color: yellow;
}

.top {
    top: 0px;
    background-color: blue;
    width: 200px;
    position: absolute;
    top: 100px;
}

JavaScript

$(function(){
   var loop   = 500,
       $table = $('#row');
    
    // just prepate test environment
    while(loop--){
    $table.append('<tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>');
    }
    
    $(window).bind('scroll', function(e){
        var $div = $('.top');
        
        if($div.offset().top <= $(window).scrollTop())
            $div.css('top', $(window).scrollTop());
        else
            $div.css('top', '100px');
    });
    
});