JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <span id="infoText"></span>
    <div id="main"></div>
    <div id="service"></div>
    <div id="clients"></div>
    <div id="about"></div>
</body>

CSS

#infoText {
    width:100%;
    position:fixed;
    top:0;
    left:0;
    height:20px;
    background-color:rgba(255,255,255,0.5);
}

body, html {
    height: 100%;
    padding: 0px;
    margin: 0px;
}
#main {
    background: red;
    height: 100%;
}
#service {
    background: green;
    height: 100%;
}
#clients {
    background: blue;
    height: 100%;
}
#about {
    background: yellow;
    height: 100%;
}

JavaScript

$(document).ready(function () {
    var passed_service = false;
    var passed_clients = false;
    $('body,html').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', function (event) {
        
        /*debugging*/
        $("#infoText").text("Window scrollTop: "+$(window).scrollTop()+" Top Offsets (service, clients):"+$("#service").offset().top+", "+$("#clients").offset().top);
        /*end-debugging*/
        
        
        if ($(window).scrollTop() >= ($("#service").offset().top)) {
            if (!passed_service) {
                console.log("To #service");
                passed_service = true;
            }
        }
        if ($(window).scrollTop() >= ($("#clients").offset().top)) {
            if (!passed_clients) {
                console.log("To #clients");
                passed_clients = true;
            }
        }
    }).scroll();
});