JSFiddle - React, Tailwind, and code Playground

HTML

blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />

<div id='buttondiv'>IRGENDWAS</div>

blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla<br />

CSS

#buttondiv{
    position:relative;
    width:100px;
    height:50px;
    background:#DDD;
    border:1px #000 solid;
    padding:10px;
}

JavaScript

$(document).ready(function(){
	var offset = jQuery('#buttondiv').offset();
	jQuery(window).on('scroll', function(){
		var scrollPosition = jQuery(this).scrollTop();
		if (scrollPosition >= offset.top) {
//			jQuery('#buttondiv').css("position","fixed").css("top","0px");
			jQuery('#buttondiv').animate(
				{
					position:	'fixed',
					top:		'0px'
				},
				'slow'
			);
		}
		else {
//			jQuery('#buttondiv').css("position","relative").css("top","");
			jQuery('#buttondiv').animate(
				{
					position:	'relative',
					top:		''
				},
				'slow'
			);
		}
	});
});