JSFiddle - React, Tailwind, and code Playground

by sungsoonz

HTML

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

CSS

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

JavaScript

$(window).on("scroll", function () {
    var fromTop = $(window).scrollTop();
    $(".sidebar").toggleClass("fixed", (fromTop > 50));
    $(".header").toggleClass("fixed", (fromTop > 50));
});