JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page-wrap">
    <div class="fixed-nav"> <span>position1</span>

    </div>
    <div id="position10" class="link">page 1</div>
    <div id="position2" class="link">page 2</div>
    <div id="kolmas" class="link">page 3</div>
    <div id="position4" class="link">page 4</div>
</div>

CSS

html, body {
    width:100%;
    height:100%;
}
.page-wrap {
    width:100%;
    height:100%;
    position:relative;
}
.fixed-nav {
    position:fixed;
    top:50px;
    left:50px;
    width:150px;
    height:50px;
    background-color:#CCC;
}
.link {
    width:100%;
    height:100%;
    border-top:1px solid #F20;
}

JavaScript

$(document).ready(function () {

    $(document).scroll(function () {
        $.each($('.link'), function (index, value) {
            var position = $(this).position();
            var top = position.top;
            var bottom = position.top + $(this).height();

            if ($('body').scrollTop() >= top && $('body').scrollTop() <= bottom) {
                $('.fixed-nav span').text($(this).attr('id'));
                return false;
            }
        });
    });
});