JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrapper">
<div id="button"></div>
</div>
CSS
#wrapper {
margin-top: 150px;
position: relative;
border: 1px solid black;
height: 1580px;
}
#button {
position: absolute;
width: 20px;
height: 20px;
background-color: #ececec;
top: 0;
margin-top: 20px;
left: 50%;
}
JavaScript
$(document).ready(function() {
$(window).scroll(function() {
var yoba = $(this).scrollTop();
if (yoba >= $('#wrapper').offset().top) {
$('#button').css('position', 'fixed');
} else {
$('#button').removeAttr('style');
}
});
});