JSFiddle - React, Tailwind, and code Playground

HTML

<div id='headerMenu'>My Header Menu</div>

<div id='a-bit-tall'>Not sooo tall div</div>

<div id='something'>Something! </div>

<div id='really-tall'>Really tall div</div>

CSS

#headerMenu {
   /*width: 10em;*/
    
   border: 1px solid black;
   background-color: #eee;
   position:relative;
    height:30px;
    width: 100%;
	min-width: 100px;
	max-width: 400px;
	
	float:none;
	display: block;
	margin: 0 auto;
    
}

#something {
    border: 1px solid black;
    background-color: #eee; 
    position:relative;
    height:30px;
    width: 100%;
	min-width: 100px;
	max-width: 400px;
	
	float:none;
	display: block;
	margin: 0 auto;
}

#a-bit-tall{
   height:50px;
   border: 1px solid black;
   background-color: #330066; 
   color:#fff;
}
#really-tall {
   height: 2000px;
   border: 1px solid black;
   background-color: #003366; 
   color:#fff;
}

JavaScript

$(window).scroll(function(){
       $("#headerMenu").css({"top": ($(window).scrollTop()) + "px"});
        
       if ($window.scrollTop() > 50){
	    $("#something").css({"top": ($(window).scrollTop()) -50 + "px"});
	}
    });