JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<header class="main_header">
  <div style="height: 20px; width: 100%; border: 1px solid blue;"></div>
</header>

<div style="height: 900px; width: 100%; border: 1px solid red;"></div>

JavaScript

var shrinkHeader = 150;
 
 $(window).scroll(function() {
   var scroll = getCurrentScroll();
   
   distance = parseInt($(document).height()) - parseInt(getCurrentScroll());
   console.log(distance);
      
   if ( scroll >= shrinkHeader ) {   			
       $('.button').addClass('shrink');
       $('.brand').addClass('shrink');
    }
    else {
        $('.button').removeClass('shrink');
        $('.brand').removeClass('shrink');
    }
  });

function getCurrentScroll() {
  return $(document).scrollTop();
  //window.pageYOffset || document.documentElement.scrollTop;
}