JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">This is a header!</div>
<div id="floating-box">This is a box</div>

CSS

body{
    font: 13px/1.65 "Helvetica Neue", Arial, sans-serif;
    height: 2000px;
}
#header{
    height: 100px;
    color: white;
    background-color: #555;
}

#floating-box{
    width: 200px;
    background: red;
    color: white;
    height: 50px;
    position: fixed;
    top: 20px;
    right: 20px;
    display: none;
}

JavaScript

$(document).ready(function()
{
    var header = $('#header')
      , floats = $('#floating-box')
      , windov = $(window);
    
    windov.on('scroll', function()
    {
        var offset = header.offset()
		  , height = header.height();
        
        if( windov.scrollTop() > (offset.top + height) ){
            floats.fadeIn(200);
        }
        else{
            floats.fadeOut(200);
        }
    });
});