JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu-wrapper">
    <div id="menu" class="default">
        <ul>
            <li><a href="#">Главная</a></li>
            <li><a href="#">Joolma</a></li>
            <li><a href="#">WordPress</a></li>
            <li><a href="#">HTML5&amp;CSS3</a></li>
            <li><a href="#">PHP</a></li>
        </ul>
    </div>
</div>
<p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>

CSS

/*
Идентификаторы и классы меняете на те которые используются 
в вашем конкретном случае
#menu
.menu-wrapper
*/

.menu-wrapper {height:50px;}
#menu {
    text-transform: uppercase;
    text-align: center;
    line-height: 50px;
    background: #69c;
}
  #menu ul {
    padding:0;
    margin:0;
    width:100%;
  }
  #menu li{
    display: inline;
    list-style:none;
    margin: 5px 10px;
  }
     #menu li a {
        padding:5px 10px;
        color:#fff;
        text-decoration: none;
     }
     #menu li a:hover{
        background: #36c;
        color: #ff0;
}
#menu.default {
    /* здесь Ваши стили для нормального состояния меню, если они нужны  */
}
#menu.fixed {
    position:fixed;
    top:0; left:0;
    width:100%;
}

JavaScript

$(document).ready(function(){
 
        var $menu  = $("#menu"),
            $height = $(".menu-wrapper").height();
 
        $(window).scroll(function(){
            if ( $(this).scrollTop() > $height && $menu.hasClass("default") ){
                $menu.toggleClass("default fixed");
            } else if($(this).scrollTop() <= $height && $menu.hasClass("fixed")) {
                $menu.toggleClass("fixed default");
            }
        });//scroll
    });