JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header-box header-big">
  <h1 class="logo" >Text</h1>
</div>
<div class="header-box header-smaller">
  
</div>

CSS

body {
  height: 2000px;
}

.header-box {
  position: fixed;
  width: 100%;
  height: 150px;
  background: red;
}

.header-big {
  z-index: 2;
}

.header-smaller {
  height: 100px;
  background: green;
}

JavaScript

var $headerBig = $(".header-big");
var $headerSmaller = $(".header-smaller");
var $win = $(window);
var doc = document.documentElement, body = document.body;
var top = 0;
//$header.clone().appendTo("body").addClass("header-two");;

$win.scroll(function () {
   top = (doc && doc.scrollTop  || body && body.scrollTop  || 0);
   if( top > 300)
   {
       $headerBig.fadeOut();
       $headerSmaller.fadeIn();
       
   }
   else if( top < 300)
   {
      	$headerBig.fadeIn();
        $headerSmaller.fadeOut();
   }
      
});