JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="section1">This item will not be stucked</div>
</div>

<div class="container">
  <div class="section2">This item will not be stucked</div>
</div>

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

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');
    }
  });