JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="my-sticky-element">This item will be stucked</div>
</div>

CSS

.my-sticky-element.stuck {
    position:fixed;
    top:0;
    box-shadow:0 2px 4px rgba(0, 0, 0, .3);
}
.my-sticky-element {
    background-color:grey;
    color: white;
    font-family: sans-serif;
    padding:5px 20px;
    width:200px;
}
.container{/*container for centering element*/
    margin: 100px auto;
    width: 200px;
}
body{min-height:1000px;}/*force scroll for demo*/

JavaScript

//store the element
var $cache = $('.my-sticky-element');

//store the initial position of the element
var vTop = $cache.offset().top - parseFloat($cache.css('margin-top').replace(/auto/, 0));
  $(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();

    // whether that's below the form
    if (y >= vTop) {
      // if so, ad the fixed class
      $cache.addClass('stuck');
    } else {
      // otherwise remove it
      $cache.removeClass('stuck');
    }
  });