JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<section>
  <div class="holder">
    <div class="other-div fixed">This div should stay fixed for a while</div>
    <div class="sticky">This div will become fixed on scroll</div>
  </div>
</section>

CSS

body { margin: 0; }

section { 
  height: 2000px;
  padding-top: 100px; 
}

div {
  width: 300px;
  height: 100px;
}

.holder {
  border: 1px solid black;
  width: 500px;
  height: 200px;
  position: relative;
}

.sticky { 
  top:30px; 
  left:10px;
  background: orange; 
  z-index: 9999;
  position: relative;
}

.other-div {
  background: gold;
  top: 20px;
  z-index: 0;
}

.fixed {
  position: fixed;
}

JavaScript

$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();
  if (scroll >= 70) {
  sticky.display('fixed')
  }else {
  sticky.removeClass('fixed');
  }
  if(getBottom('.sticky') >= getBottom('.holder')){
  	sticky.removeClass('fixed');
  }
});

function getBottom(element){
var $elm = $(element);
var offset = $elm.offset();
var top = offset.top;
return top + $elm.outerHeight();

}