JSFiddle - React, Tailwind, and code Playground

by Aramil Rey

HTML

<body>
    <div style="height: 100px;"></div>
    <div id="sidebar" class="blackStatic">
        <p>Hello</p>
    </div>
    <div id="change" style="height: 1000px;"></div>
</body>

CSS

#sidebar {
    width: 100%;
    height: 100px;
    transition: all 0.3s;
}
.blackStatic {
    position: static;
    background-color: black;
    color: red;
}
.redFixed {
    position: fixed;
    top: 0;
    background-color: red;
    color: black;
}

JavaScript

var changePoint = $('#sidebar').offset().top;
$(window).scroll(function ()  {
    if ($(window).scrollTop() >= changePoint) {
        $('#sidebar').removeClass('blackStatic');
        $('#sidebar').addClass('redFixed');
    }
    else {
        $('#sidebar').addClass('blackStatic');
        $('#sidebar').removeClass('redFixed');
    }
});