JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">

    <div class="top-bar">

        <div class="container">
        
            <div>
                <a href="index.php" class="top-bar-brand">SchoolShare</a>                  
            </div>
                   
            <nav>
                <ul class="navbar-right">
                    <li><a href="">Buy Now</a></li>
                    <li><a href="">Parents</a></li>
                    <li><a href="">Schools</a></li>
                    <li><a href="">Login</a></li>
                </ul>  
            </nav>    
        </div>
        
    </div>

</div>
</div>

<div class="bodydiv">Scroll down</div>

CSS

#menu {
    width : 100%;
    height : auto;
    overflow: auto;
    position: fixed;
    display : none;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 999999;
}

.top-bar{
	width:100%;
	overflow:auto;
	height:auto;
	padding: 10px 0;
}

.top-bar-brand{
	float:left;
	font-size:18px;
	color: #2C3E50;
	display: block;
	-webkit-margin-before: 1em;
	-webkit-margin-after: 1em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	-webkit-padding-start: 10px;
}

nav{
	float:right;	
	height: 100%;
	margin: 0;
	padding: 4px 0 0 0;
}

.navbar-right{
}

.navbar-right ul{
	padding: 0;
	list-style:none;
}

.navbar-right li{
	display:inline-block;
	margin: 0 10px;
}

body{background-color: #ddd;}

.bodydiv{height: 2000px;}

JavaScript

$(window).scroll(function () {
   var d = $('#menu'); 
    if (d.offset().top > 810) {
       d.fadeIn();
    } else {
       d.stop().hide();
    }
});