JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id="header" class="default">
		<div class="">
			<div class="logo"><a href="index.html"><h1>LOGO</h1></a></div>

			<div class="top-menu">
				<ul>
					<li><a href="#">Ссылка 1</a></li>
					<li><a href="#">Ссылка 2</a></li>
					<li><a href="#">Ссылка 3</a></li>
					<li><a href="#">Ссылка 4</a>
						<ul>
							<li><a href="#">Ссылка подменю 1</a></li>
							<li><a href="#">Ссылка подменю 2</a></li>
							<li><a href="#">Ссылка подменю 3</a></li>
							<li><a href="#">Ссылка подменю 4</a></li>
						</ul>
					</li>
					<li><a href="#">Ссылка 5</a></li>
				</ul>
			</div>
		</div>
	</div>
</body>

CSS

body {background-color:#cecece;min-height:1000px;}
a {color: #fff;text-decoration: none;}

.logo {color:#fff;width: ;height: 100px;float: left;}
.logo {padding: 0 180px 0 0}
.wrapper {margin: 0 auto;width: 1180px;}
/* ********************************************************************************************************************* */

* {padding: 0;margin: 0;}
body {}

#header {padding: 0 30px;width: 100%;height: 100px;}
#header.default {}
#header.fixed {background: #000;position: fixed;z-index: 999;}

.top-menu {}
.top-menu ul {list-style: none;}
.top-menu ul li {display: inline-block;}
.top-menu ul li a {}
.top-menu ul li:hover {background: #fff;}
.top-menu ul li ul {display: none;position: absolute;}
.top-menu ul li:hover ul {display: block;}
.top-menu  ul li ul li {display: block;}

JavaScript

$(document).ready(function() {
	var header = $("#header");

	$(window).scroll(function() {
		if ($(this).scrollTop() > 1 && header.hasClass("default")) {
			header.removeClass("default").addClass("fixed");
		} else if($(this).scrollTop() <= 1 && header.hasClass("fixed")) {
			header.removeClass("fixed").addClass("default");
		}
	});
});