JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sideBar" >
  <div class="artigos"></div>
  <div class="artigos"></div>
  <div class="artigos"></div>
  <div class="artigos"></div>
  <div class="artigos"></div>
</div>
<div class="conteudo" >
</div>

CSS

.sideBar{
  width: 180px;
  height: auto;
  float: right;
}
.conteudo{
  height: 2000px;
  background: #333;
  margin-right: 200px; 
}
.sideBar .artigos{
  width: 100%;
  height: 200px;
  background: #f30;
  margin:0 0 5px 0;
}

JavaScript

$(document).scroll(function(){
      var left = $('.sideBar').offset().left;
      if($(this).scrollTop() >= $('.sideBar').height() - $('.artigos:last').height()){
        $('.sideBar').css({
          position: 'fixed',
          top: -($('.sideBar').height() - $('.artigos:last').height()),
          left: left
        })
      }else{
        $('.sideBar').css({
          position: 'relative',
          top: 0,
          left: '0'
        })
      }
    })