JSFiddle - React, Tailwind, and code Playground

HTML

<script src="javascript"></script>
<div id='wrapper'>
  <div id='box'></div>
  <div id='navbox'></div>
</div>

CSS

#wrapper {
  height: 1500px;
  width: 300px;
  background-color: #ffffff;
}

#box {
  width: 300px;
  height: 200px;
  background-color: #000000;
}

#navbox {
  height: 530px;
  width: 30px;
  background-color: #EB1848;
  float: left;
  margin-top: 66px;
}

JavaScript

$(window).on('scroll', function() {
    if($(window).scrollTop() > $('#navbox').offset().top){
        $('#navbox').css({
            'top': $(window).scrollTop() > 0 ? '0px' : '66px',
            'position': 'fixed'
        });
    }
});