JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sharebox-wrapper" class="relative">
    <div id="sharebox">
        <div class="inner">
            share
        </div>
    </div>
</div>

CSS

body { height: 2000px; }
#sharebox {
    width:100px; 
    background:#F3F3F3; 
    border:1px solid #CFCFCF;      
    height:400px;
}
#sharebox .inner {padding:12px;}

.relative {
   position:relative; left:0px; top:150px; 
}

.fixed {
    position:fixed; top: 0; 
}

JavaScript

var mediaTop = $('div#sharebox-wrapper').offset().top; 
var media = $('div#sharebox-wrapper');

$(document).scroll( function() {
   var scrollTop = $(document).scrollTop();

   //fix/unfix as necessary
   if (mediaTop < scrollTop) {
       $(media).addClass('fixed'); 
   }
   else { 
       $(media).removeClass('fixed'); 
   }
});