JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block"></div>

CSS

body {
  height: 2000px;
  padding-top: 300px;
}

.block {
  background: #000;
  
  height: 500px;
  
  transition: .2s ease-in-out;
}

.block.sm {
  height: 300px;
}

JavaScript

function resizeSizeOnScroll(el, scrollTop){

	var el = $(el);

	if(scrollTop >= 100) {
  	el.addClass('sm');
  } else {
  	el.removeClass('sm');
  }

}

$(window).on('load scroll', function(){

	var scrollTop = $(this).scrollTop();

	resizeSizeOnScroll('.block', scrollTop);

});