JSFiddle - React, Tailwind, and code Playground

by vlit

HTML

<div class="header"></div>
<div class="menu"></div>
<div class="content"></div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

CSS

.header{
    width:100%;
    height:100px;
    border:solid red 4px;
}
.menu{
    width:10%;
    height:100px;
    border:solid green 4px; 
    float:left;
    margin: 0 0 0 10%;
}
.content{
    width:60%;
    height: 600px;
    border:solid orange 4px;
    float:left;
    
}

JavaScript

$(document).ready(function(){

    $(window).on('scroll',function(){
        if ($(window).scrollTop()>=$('.header').outerHeight()){
            $('.menu').css('marginTop',$(window).scrollTop()-$('.header').outerHeight());
        }
        else{
            $('.menu').css('marginTop',0);
        }
        
    });
});