JSFiddle - React, Tailwind, and code Playground

HTML

<div id="output"></div>

    
<ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
     <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
     <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

CSS

#output {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255,255,255, 0.9);
    border-bottom: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

JavaScript

var $output = $('#output');
var $window = $(window);
var timer;

function changeFontSize(scrollNumber) {
  $output.css('fontSize', scrollNumber <= 50 ? 18 : Math.floor(scrollNumber/10));
    
  // ...
  // load resources
  // append in DOM
  // ...etc
}

function scrollHandler() {
  var currentScroll = $window.scrollTop();
  
  $output.html(currentScroll + 'px');
  changeFontSize(currentScroll);
}

// This callback will be executed for every pixel but it will 
// do nothing if we're scrolling to fast because we're clearing
// the timeout. Only when scrolling has stopped and at least 100
// milliseconds have passed will the `scrollHandler` function run.
$window.on('scroll', function() {
  timer && window.clearTimeout(timer);
  timer = window.setTimeout(scrollHandler, 100);
});

$window.scroll();