JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">Шапка сайта</div>
<div class="wrap">
    
    <div class="content">
        <div>Левая сторона</div>
        <ul>
            <li>Текст 1</li>
            <li>Текст 2</li>
            <li>Текст 3</li>
            <li>Текст 4</li>
            <li>Текст 5</li>
        </ul>
    </div>
                
    <div class="navigation">
        <div id="mapMain">
                    <div>Правая сторона</div>
                    <ul>
                        <li>Текст</li>
                        <li>Текст</li>
                        <li>Текст</li>
                        <li>Текст</li>
                        <li>Текст</li>
                        <li>Текст</li>
                    </ul>
        </div>
    </div>
    <div style="clear: both;"></div>    
</div>

<div class="footer">Подвал сайта</div>

CSS

body {padding: 0; margin: 0;}
.wrap { position: relative; }
.navigation {
height: 100%;
max-height: 1000px;
position: absolute;
border-left: 2px solid #A30000;
right: 0; top: 0;
width: 200px;
background-color: #ccc;
}


#mapMain {}

.content {margin-right: 200px;float: left; height: 1000px;background: yellow; width: 100%;}
.header {background-color: #A30000; height: 50px; padding: 10px;}
.footer {background-color: #cc0000; height: 400px; padding: 10px;}

JavaScript

var navbar =  $('.navigation');  // navigation block
var wrapper = $('.wrap');        // may be: navbar.parent();

$(window).scroll(function(){
    var nsc = $(document).scrollTop();
    var bp1 = wrapper.offset().top;
    var bp2 = bp1 + wrapper.outerHeight()-$(window).height();
    
    if (nsc>bp1) {  navbar.css('position','fixed'); }
    else { navbar.css('position','absolute'); }
    if (nsc>bp2) { navbar.css('top', bp2-nsc); }
    else { navbar.css('top', '0'); }
});