JSFiddle - React, Tailwind, and code Playground

HTML

<div class="quarter-circle"></div>
<div class="quarter-circle-test"></div>
<div class="quarter-circle-test"></div>
<div class="quarter-circle-test"></div>
<div class="quarter-circle-test"></div>
<div class="quarter-circle-test"></div>

CSS

.quarter-circle-test {
  height: 150px;
  width: 150px;
  background-color:yellow;
}

.quarter-circle {
  height: 150px;
  width: 150px;
  background-color:blue;
}

.quarter-circle.shrink {
  height: 150px;
  width: 150px;
  background-color:red;
}

JavaScript

$(function(){

var shrinkHeader = 50;
 $(window).scroll(function() {
 var scroll = getCurrentScroll();
  if ( scroll >= shrinkHeader ) {
       $('.quarter-circle').addClass('shrink');
    }
    else {
        $('.quarter-circle').removeClass('shrink');
    }
 });

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