JSFiddle - React, Tailwind, and code Playground

HTML

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

			<div id="top-menu">
				<a class="__item" href="#">Ссылка 1</a>
				<a class="__item" href="#">Ссылка 2</a>
				<a class="__item" href="#">Ссылка 3</a>
				<div class="link-wrap">
					<a class="__item __open" href="#">Ссылка 4</a>
					<div class="None">
					</div>
				</div>
				<a class="__item" href="#">Ссылка 5</a>
				<a class="__item" href="#">Ссылка 6</a>
			</div>
		</div>
	</div>
</body>

CSS

* {margin: 0;padding: 0;}
body {background-color: #cecece;}

#header {position: fixed;z-index: 999;top: 0;right: 0;left: 0;}

#top-menu 
{
	
}

.__item 
{
	display: block;
	float: left;
	text-decoration: none;
	color: #fff;
}

.link-wrap:hover .__open 
{
	background-color: #fff;
	color: #4a4a4a;
}

.None 
{
	display: none;
	position: absolute;
	z-index: 1;
	background-color: #fff;
	width: 1358px;
	height:368px;
  top:18px;
	margin-left: -679px;
	left: 50%;
}

a.__open:hover + .None, .None:hover 
{
	display: block;
}

JavaScript

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