JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<script>
$(document).ready(function() {
   var windowHeight = $(window).height();
        $('.navigation, #mapMain').css('height', windowHeight);
	});
    
    
    
</script>

<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;}

.navigation {
float: right;
position: relative;
background-color: #ff0000;
width: 50%; 
}

.navigation.fixed {
position: fixed;
left: 50%;
top: 0;
width: 50%;
}

#mapMain {border: 1px solid #000;}

.content {float: left; width: 45%; height: 1000px; background-color: #f1f1f1; margin: 0;padding: 10px;}
.header {background-color: #A30000; height: 50px; padding: 10px;}
.footer {background-color: #cc0000; height: 200px; padding: 10px;}

JavaScript

$(document).ready(function(){

// Фиксация


  var $window = $(window),
  $navigation = $(".navigation");

  $window.scroll(function() {
    if (!$navigation.hasClass("fixed") && ($window.scrollTop() > $navigation.offset().top)) {
        $navigation.addClass("fixed").data("top", $navigation.offset().top);
    }
    else if ($navigation.hasClass("fixed") && ($window.scrollTop() < $navigation.data("top"))) {
        $navigation.removeClass("fixed");
    }
  }); 



});