JSFiddle - React, Tailwind, and code Playground

HTML

<div class="filler">Filler div</div>
<div class="filler">Filler div</div>
<div class="filler">Filler div</div>
<div id="sticky_for_a_while">This is the sticky div</div>
<div class="filler">Filler div</div>
<div class="filler">Filler div</div>
<div class="filler">Filler div</div>

CSS

body {margin: 0; padding: 0}
.filler {width: 100%; height: 300px; margin-bottom: 12px; background: aqua;}
#sticky_for_a_while {width: 300px;  background: black; color: white; padding: 6px; position: relative; bottom: 0px; left: 0px;}

JavaScript

var sticky_offset;
$(document).ready(function() {
    
    var original_position_offset = $('#sticky_for_a_while').offset();
    sticky_offset = original_position_offset.top;
    $('#sticky_for_a_while').css('position', 'fixed');


});

$(window).scroll(function () {
    var sticky_height = $('#sticky_for_a_while').outerHeight();
    var where_scroll = $(window).scrollTop();
    var window_height = $(window).height();
    

    if((where_scroll + window_height) > sticky_offset) {
        $('#sticky_for_a_while').css('position', 'relative');
    }
    
    if((where_scroll + window_height) < (sticky_offset + sticky_height))  {
        $('#sticky_for_a_while').css('position', 'fixed');
    }
    
});