JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
  <div id="header"></div>
  <div id="content"></div>
</div>

SCSS

#header{
  height : 90px;
  background-color : grey;
  width : 100%;
  .fixed &{
    top : 0;
    position : fixed;
  }
}

#content{
  height : 105vh;
}

JavaScript

var flag = false;
$(window).scroll(function(e){
	var passed_point = $(this).scrollTop() > $('#header').height()+25;
  
  if(passed_point && !flag){
    var surrogate = $('<div>', {
    	'class' : 'js-surrogate',
    	css : {
      	height : $('#header').height()
      }
    });
    $('#header').before( surrogate );
	  $('#main').addClass('fixed');
    
    console.log(surrogate)
    
    flag=true;
  }else if(!passed_point && flag){
	  $('#main').removeClass('fixed');
    $('#header').prev('.js-surrogate').remove();
    flag=false;
  }
    
    
});