JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap" id="wrap">
    <div id="navbar">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas convallis velit non odio lobortis, sed ultrices metus pellentesque. Suspendisse potenti. Integer a diam ipsum. Fusce a ornare erat, sit amet rutrum lorem. Etiam tincidunt sapien ex, aliquet blandit nulla gravida id. In nulla ligula, pharetra vel ante dapibus, tempus iaculis mi. Ut id nisi eget dui tristique bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas convallis velit non odio lobortis, sed ultrices metus pellentesque. Suspendisse potenti. Integer a diam ipsum. Fusce a ornare erat, sit amet rutrum lorem. Etiam tincidunt sapien ex, aliquet blandit nulla gravida id. In nulla ligula, pharetra vel ante dapibus, tempus iaculis mi. Ut id nisi eget dui tristique bibendum.</div>
    <main>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas convallis velit non odio lobortis, sed ultrices metus pellentesque. Suspendisse potenti. Integer a diam ipsum. Fusce a ornare erat, sit amet rutrum lorem. Etiam tincidunt sapien ex, aliquet blandit nulla gravida id. In nulla ligula, pharetra vel ante dapibus, tempus iaculis mi. Ut id nisi eget dui tristique bibendum.</main>
</div>

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 0;
}
.wrap {
    width: 100%;
    height: 600px;
    overflow: auto;
    position: relative;
    background-color: lightgray;
}
#navbar {
    position: absolute;
    overflow: hidden;
    width: 130px;
    height: 800px;
    background-color: skyblue;
    padding: 10px;
}
main {
    height: 3000px;
    font-size: 60px;
    margin-left: 150px;
}

JavaScript

var wrap = $("#wrap");
var navbar = $("#navbar");
wrap.on("scroll", function (e) {
    var nbShift = navbar.outerHeight() - navbar.parent().height() + 100;
    if (wrap.scrollTop() > nbShift) {
        navbar.css({
            position: 'fixed',
            top: -nbShift
        });
    } else {
        navbar.css({
            position: 'absolute',
            top: 0
        });
    }
});