JSFiddle - React, Tailwind, and code Playground

HTML

<div class="background">
    <div class="fixed sticky" data-offset-top="50"><p>fixed</p></div>    
    <p>asdfasdfasdfasdfasdfasdfasdfasdfasdfasd</p>
    <p>fasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</p>
    <p>fasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</p>
    <p>fasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</p>  
        <p>asdfasdfasdfasdfasdfasdfasdfasdfasdfasd</p>
    <p>fasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</p>
    <p>fasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</p>
    <p>fasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</p>  
    <p>fasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</p> 
        <p>asdfasdfasdfasdfasdfasdfasdfasdfasdfasd</p>
    <p>fasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</p>
    <p>fasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</p>
    <p>fasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</p>  
    <p>fasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</p> 
        <p>asdfasdfasdfasdfasdfasdfasdfasdfasdfasd</p>
    <p>fasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</p>
    <p>fasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</p>
   ...

CSS

.background {
    width: 1200px;
    height: 1200px;
    background: gray;
}

.background p {
    width: 400px;
}

.fixed {
    position: absolute;
    left: 800px;
    top: 50px;
    width: 22px;
}

JavaScript

$(document).ready(function() {
    var documentHeight = $(document).height();
    $(document).scroll(function() {
      var scrollTop = $(window).scrollTop();
        
      $(".sticky").offset(function() {
        $this = $(this);
        var offsetTop = $this.data("offset-top");
    
        if (scrollTop < 0) {
          scrollTop = 0;
        }
    
        var newTop = offsetTop + scrollTop;
        if (newTop < offsetTop) {
          newTop = offsetTop;
        }
    
        // Prevents document from infinitely expanding.
        var maxTop = documentHeight - $this.height();
        if (newTop > maxTop) {
          newTop = maxTop
        }
    
        // Prevents a bit of jitter since the current offset can be
        // not precisely the initial offset. 338 Vs. 338.12931923
        var currentTop = $this.offset().top;
        if ( Math.abs(currentTop - newTop) >= 1 ) {
          return { top: newTop }
        } else {
          return {}
        }
      });
    });
})