JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id="header">
		<div class="">
			<a href="index.html"><!-- <img class="logo" src=""> --></a>

			<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="">
	</div>
</body>

CSS

* {margin: 0;padding: 0;}
body {min-height:1000px;background:#4f4f4f;}

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

#header .top-menu {}
#header .top-menu ul {list-style: none;}
#header .top-menu ul li {float: left;}
#header .top-menu ul li a {display: block;padding: 49px 12px 36px;color: red;text-decoration: none;}
#header .top-menu ul li:hover {}
#header .top-menu ul li ul {position: absolute;display: none;width: 1358px;background:#fff;right:0;left:0;}
#header .top-menu ul li:hover ul {display: block;}
#header .top-menu ul li ul li {display: block;float: none;}

JavaScript

$(window).scroll(function() {
	if ($(this).scrollTop() >= 1) {
		$("#header").css({"background":"#000"});
	} else {
		$("#header").css({"background":"transparent"});
	}
});