JSFiddle - React, Tailwind, and code Playground

HTML

<section>
  <div class="space">
    Something else
  </div>
  <div class="element-with-sticky-header">
    <div class="header">Sticky Header 1</div>
    <div class="content">
      Content 1
    </div>
  </div>
  <div class="space">
    Something else
  </div>
  <div class="element-with-sticky-header">
    <div class="header">Sticky Header 2</div>
    <div class="content">
      Content 2
    </div>
  </div>
</section>

CSS

body {
  margin: 0;
}

section {
  padding-top: 100px;
}

.space {
  min-height: 500px;
}

.header {
  background: orange;
}

.content {
  background: #22FAFA;
  min-height: 1000px;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

JavaScript

var elements = $('.element-with-sticky-header');

$(window).scroll(function() {
  var scroll = $(window).scrollTop();

  elements.each(function() {
    var stickyOffsetTop = $(this).offset().top;
    var stickyOffsetBottom = stickyOffsetTop + $(this).height();
    var sticky = $(this).find('.header');

    if (scroll >= stickyOffsetTop && scroll <= stickyOffsetBottom) {
      sticky.addClass('fixed');
    } else {
      sticky.removeClass('fixed');
    }
  });

});