JSFiddle - React, Tailwind, and code Playground

HTML

<div id="id0" data-id="0" class="nbhd red scrolledto"></div>
<div id="id1" data-id="1" class="nbhd yellow"></div>
<div id="id2" data-id="2" class="nbhd green"></div>
<div id="id3" data-id="3" class="nbhd blue"></div>

CSS

.div {
        width: 100%;
    }

    .red {
        background: red;
    }

    .yellow {
        background: yellow;
    }

    .green {
        background: green;
    }

    .blue {
        background: blue;
    }

JavaScript

var down = true;

    function setHeights() {
        $('.nbhd').css('height', window.innerHeight);
    }

    function scrollDirection() {
        var lastScrollTop = $(window).scrollTop();

        $(window).scroll(function(event) {

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

            if (st > lastScrollTop){
                // down
                down = true;
                console.log('down');
            } else if (st < lastScrollTop) {
                // up
                down = false;
                console.log('up');
            }

            lastScrollTop = st;

        });

        console.log(down);
    }
    
    setHeights();
    
    $( window ).on( "scroll", function() {
        scrollDirection();
    });