JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
    <span>home</span>
</div>
<div class="anchor"></div>
<div class="sidebar">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>

<div class="other-scrollable-content">
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
</div>

CSS

.sidebar {
    height: 500px;
    background-color: #555;
    width:100px;
    position: fixed;
}

.header {
    top:0;
    z-index:999;
    width:100%;
    height:50px;
    background-color: #ddd;
    position: fixed;
}

JavaScript

$(window).on('scroll', function () {
    var windowTop = $(window).scrollTop();
    var elementTop = $('.anchor').offset().top;
    
    if(windowTop > elementTop) {
        $(".sidebar").addClass("fixed");
        $(".header").addClass("fixed");
    } else {
        $(".sidebar").removeClass("fixed");
        $(".header").removeClass("fixed");
    }

});