JSFiddle - React, Tailwind, and code Playground

HTML

Current page: <div id="cp"></div>
<div id="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  
</div>

CSS

#container{
    height: 500px;
    width:500px;
    border: 1px solid black;
    overflow:auto;
}

.item {
    
    height: 475px;
    background-color: red;
    width: 80%;
    margin-right:auto;
    margin-left:auto;
    margin-top: 5px;
    margin-bottom: 5px;
        
}

JavaScript

var $cp = $("#cp");
var $container = $("#container");

$container.off('scroll').on('scroll', function () {
    var top = $(this).offset().top;
    
    $(".item").each(function()
    {  
        var itemTop = $(this).offset().top;
        var itemBottom = $(this).offset().top + $(this).height(); 
        if(itemTop >= (top + 25) && itemTop <= (top + 50))
            $cp.html($(this).attr("page"));
        else if(itemBottom >= (top + 400) && itemBottom <= (top + 425))
            $cp.html($(this).attr("page"));
            
    });
});