JSFiddle - React, Tailwind, and code Playground

HTML

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

			<div class="top-menu">
				<ul>
					<li><a href="#"><b>Ссылка 1</b></a></li>
					<li><a href="#"><b>Ссылка 2</b></a></li>
					<li><a href="#"><b>Ссылка 3</b></a></li>
					<li><a href="#"><b>Ссылка 4</b></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="#"><b>Ссылка 5</b></a></li>
					<li><a href="#"><b>Ссылка 6</b></a></li>
				</ul>
			</div>
		</div>
	</div>

	<div class="div1">текст
	</div>
</body>

CSS

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

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

* {padding: 0;margin: 0;}
body {font-family: 'Helvetica','Open Sans','Arial',sans-serif;font-size: 14px;}

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

.top-menu {}
.top-menu ul {list-style: none;}
.top-menu ul li {display: inline-block;}
.top-menu ul li a {display: block;padding: 49px 11.5px 36px;}
.top-menu ul li:hover {}
.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

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