JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <style>
            body {
                margin: 0px;
                padding: 0px;
                width: 100%;
                height: 100%;
                position: relative;
            }

            #header {
                background:red;
                width: 100%;
                height: 50px;
                position:fixed;
                top: 0px;
            }

           
.s_absolut{
            position: absolute;
            float:left;
                background: blue;
                width:120px;
                min-height:100px;

                top: 50;
                left:0;
           }
.s_fixed {
            position:fixed;
            float:left;
                background: blue;
                width:120px;
                min-height:100px;
                left:0;
               bottom:50px;
            }
            #footer {
                background:red;
                width: 100%;
                height: 50px;
                position:fixed;
                bottom: 0px;
            }

            #content {
                margin: 60px 0px 60px 140px;
            }
        </style>
    </head>
    <body>
        <div id="sidebar" class='s_absolut'>
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />

        </div>
        <div id="content">
            top<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
           ...

JavaScript

$(document).ready(function(){

$(window).scroll(function(){
        tmp=$('#sidebar').outerHeight()+10+$('#header').outerHeight()-$('#footer').offset().top;
        
        if(tmp<0){
                $('#sidebar').removeClass('s_absolut').addClass('s_fixed');
              }
        else
        {
                $('#sidebar').removeClass('s_fixed').addClass('s_absolut');
        }
    } );
});