JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div id="top_bar">
    <ul>
        <li class="mb">Call Us: (+92) 42 3578 1448-9 - Mail: [email protected]</li>
    </ul>
    <div class="social_icons">
        <a href="#">FB.icon</a>
    </div>
</div>
    
     <div class="container">
    <div class="navbar-header">
        my navigation bar
    </div>
</div>

CSS

.sticky
.navbar-header{
    background:#4679BD;
    height:40px;
    padding:5px;;
    width:100%
}
.container{
    height:800px;
   

}

JavaScript

$(window).scroll(function() {
	 
    if ($(this).scrollTop() > 100){  
        $('.navbar-header').addClass("sticky");
    }
    else{
        $('.navbar-header').removeClass("sticky");
    }
});