JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header-block">
    Header-block, this sits here in the background
</div>

<div id="content">
    <div id="work">
        This content should be fixed when at the top
    </div>
    <div id="description">
        This content should scroll -
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut ipsum urna. Donec sit amet cursus turpis. Etiam nec laoreet massa. Maecenas vitae ultrices ante. Aenean ut nibh et nisi elementum placerat. Donec velit libero, lobortis vel nibh quis, pharetra tempor augue. Fusce lacinia justo commodo odio accumsan aliquam. In accumsan cursus est nec adipiscing. In vestibulum quam eget lacus condimentum pharetra. Pellentesque pellentesque magna ut ipsum tincidunt porttitor. Praesent bibendum tortor in euismod sollicitudin. Nulla tempus, est in ultrices semper, erat eros ullamcorper velit, ut dictum quam orci sit amet odio.
    </div>
    
</div><!-- end content -->

<div id="footer">
    This should appear at the bottom
</div>

CSS

body {
    margin: 0px;
    padding: 0px;
}
#header-block {
    background: green;
    width: 100%;
    position: fixed;
    z-index: 1;
    height: 300px;
    top: 0;
}
#content {
    margin-top: 300px;
    width: 100%;
    position: relative;
    z-index: 2;
}
#work {
    background: red;
    width: 50%;
    height: 100vh;
    float: left;
    position: absolute;
}
#description {
    background: blue;
    width: 50%;
    height: 1200px;
    float: right;
    font-size: 30px;
}
#footer {
    background: black;
    width: 100%;
    height: 400px;
    z-index: 3;
    color: #fff;
    position: relative;
    clear: both;
}

JavaScript

// Fix work column on scroll
contentStart = $("#content").offset().top ;
contentSize  = $("#content").height() ;

window.onscroll = function(){   
    if( window.XMLHttpRequest ) {
        var position=window.pageYOffset;

        // calculate the position of the footer and the actual seen window            
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();
        var elemTop = $("#footer").offset().top;

         if ( position > 300 && !(docViewBottom >= elemTop)) {
             $('#work').css({'position':'fixed', 'top':'0', 'height':'100vh'});
          } else {
              // if the footer is visible on the screen
              if(docViewBottom >= elemTop) {
                 $('#work').css({ 'top': 0 - (docViewBottom - elemTop) }); // scroll the #main div relative to the footer       
              } else {
                  $('#work').css({'position':'relative', 'top': 'auto'}) ;
              }
         }

    }
}