JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
	<div id="menu">
		<ul class="menu-list" data-container="menu">
			<li class="menu-item"><a href="#" class="menu-link">Каждый</a></li>
			<li class="menu-item"><a href="#" class="menu-link">Начинающий</a></li>
			<li class="menu-item"><a href="#" class="menu-link">Верстальщик</a></li>
			<li class="menu-item"><a href="#" class="menu-link">Должен</a></li>
			<li class="menu-item"><a href="#" class="menu-link">Научиться</a></li>
			<li class="menu-item"><a href="#" class="menu-link">Располагать</a></li>
			<li class="menu-item"><a href="#" class="menu-link">Элементы</a></li>
		</ul>
	</div>
	<div id="content">
		<div class="text"></div>
	</div>
</div>

CSS

body {
	margin: 0;
}
#container {
	width: 620px; /*Ширина области с контентом*/
	padding: 0 0 0 180px; /*На ширину .menu-list*/
	margin: auto;
}
#menu {
	position: fixed;
	top: 0;
	right: 50%;
	bottom: 0;
	left: 0;
	min-width: 400px; /*Половина ширины #container*/
	background: #f0f0f0;
}
.menu-list {
	position: relative;
	float: right;
	width: 180px;
	margin: 0 220px 0 0; /*На разницу между половиной ширины #container и собственной шириной*/
	padding: 0;
	list-style: none;
	text-align: center;
}
#content {
	position: relative;
	background: #69c;
}
.text {
	height: 2000px;
}

JavaScript

$(function () {
	var $menu = $('[data-container="menu"]'),
		$window = $(window),
		position = 0;

	$window.on('scroll', checkScroll);
	checkScroll();

	function checkScroll () {
		var delta = $window.scrollLeft();

		if (delta != position) {
			$menu.css({
				left: - delta
			});
			position = delta;
		}
	}
});