JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top">
    <h3>Scroll window to see how often scroll event fires</h3>

    <div>Scroll event fired <span id="count">0</span> times</div>

</div>

CSS

div.article{ height:40px; margin-bottom:6px; border:1px solid green}
#top{ position:fixed; background:#CCC; height:60px; width:100%; line-height:1.5em }
#count{ color:blue; font-weigth:bold}

JavaScript

for (i = 0; i < 60; i++) {
    $('body').append($('<div>', {
        id: 'd' + (i + 1),
        class: 'article'
    }))
}

var timer;

var $count = $('#count')
var ctr = 0;
$(window).scroll(checkDelay);

function checkDelay() {
    if (timer) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
        ctr++;
        $count.text(ctr);
    }, 300);

}