JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">header
</div>
<div id="button">button
</div>
<div id="content">some content
</div>
<div id="footer">footer
</div>

CSS

#header,#footer{
    background-color:red;
 
    
}
#content
{
    height:2000px;
}
#footer
{
    height:200px;
}
#button
{
    background-color:gray;
    width:100px;
    height:100px;
    position:fixed;
    bottom:0;
    left:0;
    right:0;    
}
.fixed_button{
    position:absolute !important;
    margin-top:1900px;
    bottom: auto !important;
}

JavaScript

$(window).scroll(function() {
	  $("#button").css("bottom", Math.max(0, 200 - ($(document).height() - $(window).scrollTop() - $(window).height())));
});