JSFiddle - React, Tailwind, and code Playground

by Anand Rathod

HTML

<div id="wrapper">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <div id="stickyWrapper">
        <div id="sticky">Sticky</div>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

CSS

#wrapper {margin: 50px; width: 200px; height: 100px; overflow: auto; position: relative; }
#sticky {background: gray;}

JavaScript

$(function(){
    var $wrapper = $('#wrapper')
        , $sticky = $('#sticky')
        , $stickyWrapper = $('#stickyWrapper')
        , stickyTop = parseInt($('#sticky').offset().top)
        , wrapperTop = parseInt($wrapper.offset().top)
        , isFixed = 0;
    
    $sticky.width($wrapper.width());
    $stickyWrapper.height($sticky.height());

    processScroll();

    $wrapper.on('scroll', processScroll);

    function processScroll() {
      var i, scrollTop = $wrapper.scrollTop();
      if (!isFixed && scrollTop >= stickyTop - wrapperTop) {
        isFixed = 1;
        $sticky.css({'position': 'fixed', 'top': wrapperTop});
      } else if (isFixed && scrollTop <= stickyTop - wrapperTop) {
        isFixed = 0;
        $sticky.css({'position': 'static', 'top': 0});
      }
    }
});