JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<section>
  <div class="sticky">This div will stick to the top</div>
</section>

CSS

body { margin: 0; }

section { 
  height: 2000px;
  padding-top: 100px; }

.sticky { background: orange; }

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

JavaScript

var stickyOffset = $('.sticky').offset().top;

$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();
    
  if (scroll >= stickyOffset) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});