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">
            <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. (HTTP (without...

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;
    pointer-events: none;
    overflow: hidden; /* Remove top offset from h1*/
}
.scroll.stick {
    position: fixed;
    left: 20px;
    right: 0;
    top: 0;
}
.scroll.clone {
    height: 0;
    overflow: hidden;
}
.scroll.clone.stick-clone {
    height: auto;
}

JavaScript

$(document).ready(function() {
    var cnt = $('.right');
    var scrollEl = $('.scroll');
    var scrollClone = scrollEl.clone().addClass('clone');
    scrollEl.before(scrollClone);
    cnt.scroll(function() {
        var expression = scrollClone.offset().top <= 0;
        scrollEl.toggleClass('stick', expression);
        scrollClone.toggleClass('stick-clone', expression);
    })
})