JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height:3000px; position:relative;float:left;">
    <div class="header">header</div>
    <span id="subnav">hold this</span>
</div>

CSS

.header {float:left; height:100px; margin:2px 3px 5px; padding: 2px 1px 3px 4px; border: 2px solid #fff; width:1000px; }
#subnav {background-color:#000; height:20px; color:#fff;  width:1000px; float:left; left:0;}

JavaScript

$(document).ready(function() {
   $(window).scroll(function() {
       
       var headerH = $('.header').outerHeight(true);
       console.log(headerH);
//this will calculate header's full height, with borders, margins, paddings
       var scrollVal = $(this).scrollTop();
        if ( scrollVal > headerH ) {
            $('#subnav').css({'position':'fixed','top' :'0px'});
        } else {
            $('#subnav').css({'position':'static','top':'0px'});
        }
    });
 });