JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width:100%; display:flex;">
    <div></div>
    <div id="chat"></div>
</div>

CSS

* {
    margin: 0px;
    padding: 0px;
}
body > div >div:first-of-type {
    width:70%;
    height: 2000px;
    background-color: #ff9d58;
    margin:10px;
}
#chat {
    width:30%;
    height: 400px;
    background-color:#22792d;
    margin:10px;
}
.f-nav {
    z-index: 9999;
    position: fixed;
    right: 0px;
    top: 0;
}

JavaScript

$(document).ready(function () {

    var nav = $('#chat');

    $(window).scroll(function () {
        if ($(this).scrollTop() > 300) {

            nav.addClass("f-nav");
        } else {
            nav.removeClass("f-nav");
        }
    });


});