JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://bigspotteddog.github.io/ScrollToFixed/jquery-scrolltofixed-min.js"></script>
<div class="divContexto">
    <div>
        <div class="marker">Date 1</div>
    </div>
    <div class="section">One event</div>
    
    <div>
        <div class="marker">Date 2</div>
    </div>
    <div class="section">One event</div>
    
    <div>
        <div class="marker">Date 3</div>
    </div>
    <div class="section">One event</div>
    
    <div>
        <div class="marker">Date 4</div>
    </div>
    <div class="section">One event</div>
</div>

CSS

.divContexto{
    height: 400px;
    width: 900px;
    position: relative;
    overflow: auto;
}

.marker {
    position: absolute; // This is important!
    margin: 0 auto;
    width: 200px;
    height: 98px;
    border: 3px dashed red;
    text-align: center;
    font-size: 20px;
    background: #FFF;
}

.marker:nth{
    background: #CCC;
}

.section {
    margin: 0;
    text-align: center;
    font-size: 40px;
    height: 800px; 
    border: 3px #666 dashed;
}

JavaScript

$(function() {      
    function registerMarkers() {
        var collection = $('.marker');
        $.each(collection, function(index, marker) {
            // The last element always does not have a limit		          	
           if (index == collection.length - 1) {		      	    	
               if ($.isScrollToFixed(marker)) $(marker).trigger('remove.ScrollToFixed');
               $(marker).scrollToFixed();
           } else {
               var nextMarker = $(collection[index + 1]);
               // Skip current, if it and the following one are already registered
               if ($.isScrollToFixed(marker) && $.isScrollToFixed(nextMarker)) return true;
               // On this stage we have all unregistered markers and the last registered one, which precedes the first unregistered marker.
               var nextMarkerC = nextMarker.parent(); // For offsets we rely on stable position of marker container
               
               $(marker).scrollToFixed({
                   limit: nextMarkerC.offset().top - 100
               });
           }
                });
            }    
    
    registerMarkers();
});