JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div id="first"></div>
  <div id="second">ff</div>
</div>

CSS

#container {
  position:relative;
}
#first {
  width:50%;
  background:#333;
  height:10000px;
  overflow: auto;
}
.affix {
  position: fixed;
}
#second {
  position: absolute;
  right: 0;
  top:0;
  width:50%;
  height:2000px;
  background: limegreen;
  overflow: auto;
  border: 1px solid #000;
}

JavaScript

var sh = $('#second').height();

$(window).scroll(function(){

  console.log(sh);
  console.log($(window).scrollTop() + $(window).height());
  if ($(window).scrollTop() == sh) {
   sh.addClass("affix");
  }

});