JSFiddle - React, Tailwind, and code Playground

HTML

<div class="float_block" id="float_block">float_block</div><div class="content_block">content_block</div>

CSS

.float_block {
    position: fixed;
    top: 20px;
    width: 100px;
    height: 200px;
    
    background: #222;
    
    color: white;
}
.content_block {
    width: 300px;
    height: 800px;
    margin-top: 20px;
    margin-left: 120px;
    
    background-color: #999;
}

JavaScript

var float_block = document.getElementById("float_block"),
    scroll = window.pageYOffset || document.documentElement.scrollTop,
    float_block_offtop = float_block.offsetTop;

if(scroll >= float_block_offtop) float_block.style.top = "0px";
window.onscroll = function() {
    scroll = window.pageYOffset || document.documentElement.scrollTop;
    if(scroll <= float_block_offtop) float_block.style.top = float_block_offtop - scroll + "px";
    else float_block.style.top = "0px";
}