JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
    <div class="left"></div>
    <div class="right">Protocol -- Specifies the protocol name be used to access the resource on the Internet. (HTTP (without SSL) or HTTPS (with SSL)) hostname -- Host name specifies the host that owns the resource. For example, www.stackoverflow.com. A server provides services using the name of the host. port -- A port number used to recognize a specific process to which an Internet or other network message is to be forwarded when it arrives at a server. pathname -- The path gives info about the specific resource within the host that the Web client wants to access. For example, stackoverflow.com/index.html. query -- A query string follows the path component, and provides a string of information that the resource can utilize for some purpose (for example, as parameters for a search or as data to be processed). hash -- The anchor portion of a URL, includes the hash sign (#).
        <div class="scroll-wrapper">
            <div class="scroll">
                 <h1>Fixed Top</h1>
Protocol -- Specifies the protocol name be used to access the resource on the Internet. (HTTP (without SSL) or HTTPS (with SSL)) hostname -- Host name specifies the host that owns the resource. For example, www.stackoverflow.com. A server provides services using the name of the host. port -- A port number used to recognize a specific process to which an Internet or other network message is to be forwarded when it arrives at a server. pathname -- The path gives info about the specific resource within the host that the Web client wants to access. For example, stackoverflow.com/index.html. query -- A query string follows the path component, and provides a string of information that the resource can utilize for some purpose (for example, as parameters for a search or as data to be processed). hash -- The anchor portion of a URL, includes the hash sign (#).Protocol -- Specifies the protocol name be used to access the resource on the Internet....

CSS

.content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}
.left {
    position: absolute;
    top: 0;
    left: 0px;
    width: 20px;
    bottom: 0;
    background: red;
}
.right {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px;
    right: 0;
    overflow: auto;
    background: #f5f5f5;
}
.scroll {
    background: yellow;
}
.fixed-top {
    position:fixed;
    top:0;
    left:20px;
    right:20px;
}

JavaScript

$(document).ready(function () {
    var startScrollTop = 0;
    $('.right').scroll(function () {
        var $scroll = $('.scroll');
        if ($scroll.offset().top <= 0 && $('.right').scrollTop() > startScrollTop) {
            if (startScrollTop === 0) {
                startScrollTop = $('.right').scrollTop();
            }
            $('.scroll-wrapper').css("height", $('.scroll').height() + 300);
            $scroll.addClass("fixed-top");
        } else {
            $scroll.removeClass("fixed-top");
        }
    })
})