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:520px;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));
var contentBottom = $("#content").height() + top;


$(window).scroll(function() {

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

    var navBottom = top + $("#navigation").height() + y;

    if (navBottom > contentBottom) {
        $("#navigation").hide();
    } else {
        $("#navigation").show();
    }

});