JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div>
        <div style='height:300px;' class='post'>
            <p class="description" style="display: none;">---1. CONTENT AREA ONE---</p>
            Page Content / Image
        </div>
        <div style='height:250px;' class='post'>
            <p class="description" style="display: none;">---2. CONTENT AREA TWO---</p>
            Page Content / Image
        </div>
        <div style='height:350px;' class='post'>
            <p class="description" style="display: none;">---3. CONTENT AREA THREE---</p>
            Page Content / Image
        </div>
        <div style='height:200px;' class='post'>
            <p class="description" style="display: none;">---4. CONTENT AREA FOUR---</p>
            Page Content / Image
        </div>
        <div id='scrollContent'></div>
        <div style='height:800px;'></div>
    </div>
</div>

CSS

.post {
	border: 4px ridge grey;
}

#scrollContent {
	position: fixed;
	top: 150px;
	right: 350px;
	height: 90px;
	width: 250px;
	background: grey;
    text-align: center;
}

.description {
	width: 200px;
	float: left;
	position: fixed;
	background: grey;
}

JavaScript

$(window).load(function () {
    $(window).on("scroll resize", function () {
        var pos = $('#scrollContent').offset();
        $('.post').each(function () {
            if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
                $('#scrollContent').html($(this).find('.description').text()); 
                return; //break the loop
            }
        });
    });

    $(document).ready(function () {
        $(window).trigger('scroll'); // init the value
    });
})