JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="es">
    <head>
         <title>Test</title>
        <meta charset="utf-8" />  
    </head>
    <body>
            <div id="d1">
                <div class="sidebar">
                </div>
            </div>
    </body>
</html>

CSS

#d1{
    width: 100px;
    height: 700px;
    border: 1px solid black;
    position: relative;
     margin: 200px 0px 800px 0px; 
}

.sidebar { 
  width: 190px; 
  height: 200px;
  border: 1px solid black;
  position: absolute; 
  top: 0px;
  margin-left: 200px; 
}

JavaScript

$(window).scroll(function(){
    var scr = $(this).scrollTop();
    //console.log(scr);

    var offset = $('div#d1').offset();
    //console.log('Coordenadas: '+offset.top);

    if(scr >= offset.top){
        $('div.sidebar').css('position','fixed');
        $('div.sidebar').css('top','0');
    }else{
        $('div.sidebar').attr('style','');
    }

    if(scr >= $('div#d1').height()){
        var top = $('div#d1').height() - $('div.sidebar').height();
        $('div.sidebar').css('position','absolute');
        $('div.sidebar').css('top', top);
    }

});