JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    logo
</header>
<div id="sub_header">
    some sub header
</div>

CSS

body { height:2000px; }
header { height:52px; border-bottom:1px solid #000; padding:10px 0; }
#sub_header { height:18px; border-bottom:1px solid #ccc; padding:5px 0; }
#sub_header.sticky { position:fixed; top:0px; left:0px; right:0px; z-index:99999; }

JavaScript

$(function(){
    $(window).scroll(function(){
        // make sure you change 52 to your headers height plus your padding
        if ($(window).scrollTop() > 72) {
            $("#sub_header").addClass("sticky");
        } else {
            $("#sub_header").removeClass("sticky");
        }
    });
});