JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
    <a href="#one">one</a>
    <a href="#two">two</a>
    <a href="#three">three</a>
    <a href="#four">four</a>
</div>
<div class="a">
    <a id="one">&nbsp;</a>
</div>

<div class="b">
    <a id="two">&nbsp;</a>
</div>

<div class="c">
    <a id="three">&nbsp;</a>
</div>

<div class="d">
    <a id="four">&nbsp;</a>
</div>

CSS

.a {
   display: block;
   height: 600px; 
   background-color: red;
}

.b {
   display: block;
   height: 600px; 
   background-color: yellow;
}

.c {
   display: block;
   height: 600px; 
   background-color: blue;
}

.d {
   display: block;
   height: 600px; 
   background-color: green;
}

JavaScript

$(document).ready(function() {
    
    var lastScrollTop = 0;
    $(window).scroll(function(event){
        
        // Code A : detect up/down scroll
       var st = $(this).scrollTop();
       if (st > lastScrollTop){
           // downscroll code
           console.log('down');
       } else {
          // upscroll code
          console.log('up');
       }
       lastScrollTop = st;
        
        // Code B : detect scroll in progress
       clearTimeout($.data(this, 'scrollTimer'));
       $.data(this, 'scrollTimer', setTimeout(function() {
        // do something
        console.log("Haven't scrolled in 250ms!");
       }, 250));
        
    });
    

    
});