JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bg">
    <div class="button">Button</div>
</div>

CSS

body {height:3000px; font-family:Arial; font-size:15px; margin:0; padding:0;

background-image: linear-gradient(bottom, rgb(138,0,0) 26%, rgb(255,255,255) 100%);
background-image: -o-linear-gradient(bottom, rgb(138,0,0) 26%, rgb(255,255,255) 100%);
background-image: -moz-linear-gradient(bottom, rgb(138,0,0) 26%, rgb(255,255,255) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(138,0,0) 26%, rgb(255,255,255) 100%);
background-image: -ms-linear-gradient(bottom, rgb(138,0,0) 26%, rgb(255,255,255) 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.26, rgb(138,0,0)), color-stop(1, rgb(255,255,255)));
}
.button {background:#ccc; border:2px solid #666; padding:4px 5px 3px 5px; display:inline-block; margin-top:100px}

JavaScript

$(function(){
    var btn = $('.button');
    var btnPosTop = btn.offset().top;
    var win = $(window);
    win.scroll(function(e){
        var scrollTop = win.scrollTop();
        if(scrollTop >= btnPosTop){
            //we've reached the button
            btn.css({position:'fixed',top:0,marginTop:0});
        }else if(btn.css('position') === 'fixed'){
            //if we scroll back up past the button's original position, and the button had previously been changed to its fixed position, we change it back
            btn.css({position:'',top:'',marginTop:'100px'});
        }
    });
});