JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigation">
   <p>Navigation</p>
   <p style="font-size:0.8em;"> * Hide me under footer *</p>
   <p style="font-size:0.8em;margin-top:230px;"> * Hide me *</p>
</div>

<div id="content">
    <p>Content</p>
    <p style="font-size:0.8em;"> * Thanks for your help *</p>
</div>

<div id="footer">
    <p>Footer</p>
</div>

<div id="footer_b">
    <p>Footer_b</p>
</div>

CSS

#navigation {width:140px;height:300px;position:absolute;background-color:#E5450F;margin-bottom:300px;margin-left:320px;}
#navigation p {text-align:center;}
#navigation.fixed {position:fixed;top:0;}

#content {height:320px;width:400px;background-color:#ddd;margin-bottom:10px;text-align:center;}


#footer {height:300px;width:auto;position:relative;z-index:0;background-color:#5F93AB;margin:;padding:0;text-align:center;}

#footer_b {height:300px;width:300px;background-color:#000;position:relative;z-index:0;color:#fff;}

JavaScript

var top = $('#navigation').offset().top - parseFloat($('#navigation').css('margin-right').replace(/auto/, 0));

  $(window).scroll(function() {
    var y = $(window).scrollTop();            
   if (y >= top) {
     $('#navigation').addClass('fixed');     
     } else {
       $('#navigation').removeClass('fixed');
     }
   });