JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="Layer1"></div>
  <div id="sticky-anchor"></div>
  <div id="Layer2"></div>
  <div id="Layer3"></div>
</body>

CSS

body {
  height: 3000px;
  position: relative;
}
#Layer2	{
  position: absolute;
  text-align: left;
  left: 0px;
  top: 200px;
  width: 950px;
  height: 57px;
  z-index: 1;
}

.stick {
  position:fixed !important;
  top:0 !important;
}

JavaScript

jQuery(document).ready(function($){
  $(window).scroll(sticky_relocate);
  sticky_relocate();
});

function sticky_relocate(){
  var s=$('#Layer2');
  var pos = s.position();

  var window_top = $(window).scrollTop();
  var div_top = pos.top;

  s.html("Distance from top:" + pos.top + "<br />Scroll position: " + window_top);

  if(window_top > pos.top){
    s.addClass('stick');
  }
  else{
    s.removeClass('stick');
  }
}