JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="top"></div>
</div>

CSS

.wrap{
    width: 300px;
    border: 1px solid green;
    margin: 0 auto;
    height: 1000px;
}

.top{
    background: green;
    height: 100px;
}

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

JavaScript

var top = $('.top').offset().top;
	$(window).scroll(function (event) {
		var y = $(this).scrollTop();
		if (y >= top){
			$('.top').addClass('sticky');
		}
		else{
			$('.top').removeClass('sticky');
		}
  
  });