How to make flex item fixed in css

I am aware that we can make use of sticky/fixed to stick an element at a place while scrolling (eg. sticking navbar at the top while scrolling down). I want to create a scenario where the navbar not only sticks at the top but when it comes across another div (let's call this "side") in the body, then they both will stick in their respective places and scroll down.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Position</title>
    <style>

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
        body {
            margin-bottom: 1000px;
        }

        .navbar, 
        .jumbo,
        .content,
        .side
        {
            height: 200px;
            width: 100%;
        }
        
        .navbar {
            background-color: lightblue;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
        }

        .jumbo {
            background-color: lightpink;
            margin-top: 200px;
        }

        .container {
            display: flex;
        }

        .content {
            background-color: red;
        }

        .side{
            background-color: green;
            position: relative;
        }

    </style>
</head>
<body>
    <div class="navbar"></div>
    <div class="jumbo"></div>

    <div class="container">
        <div class="content"></div>
        <div class="side"></div>
    </div>
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>

        $(window).resize(function() {

            var contentVar = $(".side"),
            navBar = $(".navbar"), 
            startPosition = contentVar.offset().top,
            navBarPosition = navBar.offset().top + navBar.height(),
            contentWidth = contentVar.innerWidth();

            var y = $(this).scrollTop(),
                currNavPos = y + navBar.height();

            console.log("-------WINDOW RESIZE BEGINS--------");
            console.log("contentWidth", contentWidth);
            console.log("left", contentVar.css("left"));
            console.log("-------WINDOW RESIZE ENDS--------");

            if(startPosition <= currNavPos) {
                contentVar.css("position", "fixed");
                contentVar.css("top", 0);
                contentVar.css("right",0);
                contentVar.css("left", contentWidth);
                contentVar.css("transform", "translateY(200px)");
                // contentVar.css("top", navBarPosition);
            } else {
                contentVar.css("position", "relative");
                contentVar.css("top", "");
                contentVar.css("transform", "");
                contentVar.css("right", "");
                contentVar.css("left", "");
            }
        });

        var contentVar = $(".side"),
            navBar = $(".navbar"), 
            startPosition = contentVar.offset().top,
            navBarPosition = navBar.offset().top + navBar.height(),
            contentWidth = $('.side').innerWidth();

        $(document).scroll(function() {
            var y = $(this).scrollTop(),
            currNavPos = y + navBar.height();

            console.log("-------SCROLL BEGINS--------");
            // contentWidth = $('.side').innerWidth();
            console.log("startPosition", contentVar.offset().top);
            console.log("navBarPosition", navBar.offset().top + navBar.height());
            console.log("left", $('.side').css('left'));
            console.log("-------SCROLL ENDS--------");

            console.log("scrollTop", y);
            console.log("navBarPosition", navBarPosition);
            console.log("startPosition", startPosition);
            console.log("currNavPos", currNavPos);
            console.log("contentWidth", contentWidth);

            if(startPosition <= currNavPos) {
                contentVar.css("position", "fixed");
                contentVar.css("top", 0);
                contentVar.css("right",0);
                contentVar.css("left", contentWidth);
                contentVar.css("transform", "translateY(200px)");
                // contentVar.css("top", navBarPosition);
            } else {
                contentVar.css("position", "relative");
                contentVar.css("top", "");
                contentVar.css("transform", "");
                contentVar.css("right", "");
                contentVar.css("left", "");
            }
        });
    </script>
</body>
</html>

For ease of understanding of what I am trying to convey here, this is my code - https://jsfiddle.net/xLmenyvz/

There are easier ways to achieve this, but since my body content is a flexbox divided into left and right, I cannot simply make the "side" element fixed. Hence I have achieved this using javascript and jquery, and it is working almost fine. But when I resize the window, the width of the element is not getting updated in realtime and it still remembers the old width only, due to which, when the navbar comes across the "side" element, that element size fumbles. It gets corrected once I refresh it though.

How do I achieve what I am already achieving without refreshing the page?