JSFiddle - React, Tailwind, and code Playground

HTML

<div class="current_div">Hi</div>

<div class="red" data-section="Section Red">red</div>
<div class="blue" data-section="Section Blue">blue</div>
<div class="yellow" data-section="Section Yellow">yellow</div>
<div class="green" data-section="Section Green">green</div>

CSS

*{margin: 0;}
.current_div{position: fixed;background: #ccc;top: 0;width: 100%;}
.red, .blue, .yellow, .green{height: 500px;}
.red{background: red;}
.blue{background: blue;}
.yellow{background: yellow;}
.green{background: green;}

JavaScript

$.fn.isOnScreen = function () {
    var win = $(window);
    var viewport = {
        top: win.scrollTop(),
        left: win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();
    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();
    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};

var currentDiv = $('.current_div');

$(window).scroll(function () {
    if ($('.red').isOnScreen() == true) {
        currentDiv.text($('.red').data('section'));
    }
    else if($('.blue').isOnScreen() == true){
        currentDiv.text($('.blue').data('section'));
    }
    else if($('.yellow').isOnScreen() == true){
        currentDiv.text($('.yellow').data('section'));
    }
    else if($('.green').isOnScreen() == true){
        currentDiv.text($('.green').data('section'));
    }
});