JSFiddle - React, Tailwind, and code Playground

HTML

<div class="landing">
    <h1>HELLO!</h1>    
</div>

<div class="fillWindow">
    <div class="header">
        <h3>About</h3>
    </div>     
<p>Consectetur adipiscing elit. Quisque consectetur venenatis iaculis. Proin tincidunt sem eget metus mollis vestibulum. Proin mattis, libero vitae volutpat luctus, magna purus congue eros, vel ultricies elit mauris a metus. Ut interdum suscipit felis eget varius. Vestibulum sit amet dolor vitae metus vulputate placerat ac ac neque. Suspendisse egestas faucibus velit, sed pretium mauris sollicitudin ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies hendrerit hendrerit. Vestibulum at tortor sem.

    Nunc egestas iaculis diam. Nam elementum ante vitae nunc congue sit amet viverra felis auctor. Sed sem velit, tincidunt eget pellentesque et, elementum ac metus. Fusce eu risus metus, ac vehicula dolor. Suspendisse bibendum auctor ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum placerat, justo a mollis iaculis, mi diam sagittis nisl, sit amet viverra lorem diam convallis quam. Nam vel elementum libero. Nullam eget dui non massa scelerisque tristique. Suspendisse enim neque, laoreet vel euismod vitae, molestie sit amet nulla. Maecenas tempus facilisis sodales. Integer mattis, tellus sed varius vulputate, risus mi condimentum dolor, eu hendrerit arcu odio vel justo. Nullam id eros non quam iaculis scelerisque eget consectetur eros.</p>
</div>


<div class="fillWindow" style="background-color:#000;">
    <div class="header">
        <h3>Contact</h3>
    </div> 
<p>Sed varius, leo tempor laoreet ornare, felis diam ultrices nibh, sed tempor sem magna et libero. Duis sed odio at tortor varius iaculis. Sed elit purus, consequat vitae euismod quis, convallis eget diam. Nunc ornare facilisis ipsum, in mollis orci egestas a. Donec ornare, ipsum vitae varius fermentum, velit augue laoreet massa, ac hendrerit urna erat vitae lacus. Aliquam rhoncus quam non augue tincidunt eget...

CSS

body { 
    margin:0;
    height:100%;
    font-family:sans-serif;
}

h3{
    font-size:24pt;
    padding:20px;
    text-align:center;
}
.header {
    display: none;
    position: relative;
    left: 0px;
    right: 0px;
    top: 500px;
    height: 80px;
    width: 100%;
    background:red;
    color: #fff;
    text-align: center;
}

.header p { 
    padding: 10px; 
}

.landing{
    height:100vh;
    width:100%;
    background:yellow;
    padding-top:30px;
}

.landing h1{
    text-align:center;
    font-size:70px; 
}

.fillWindow {
    height:100vh;
    width:auto;
    background:#444;
    color:#fff;
    padding:30px;
}

.fillWindow p{
    margin-top:150px;
}

JavaScript

var $fillWindow = $(".fillWindow").first(), // or eq() for others
    position = $fillWindow.position(),
    height = $fillWindow.height();

header.css({ opacity: '0', display: 'block' });

$(window).scroll(function() {
       
   var scrolledLength = ( $(window).height() +extra) + $(window).scrollTop(),
       documentHeight =  $(document).height();

    
    console.log( 'Scroll length: ' + scrolledLength + ' Document height: ' + documentHeight )
       
        
   if( scrolledLength >= documentHeight ) {
       
       header
          .addClass('top')
          .stop().animate({ top: '20', opacity: '1' }, 800);

   }
   else if ( scrolledLength <= documentHeight && header.hasClass('top') ) {           
        header
           .removeClass('top')
           .stop().animate({ top: '500', opacity: '0' }, 800);

   } 
});