Как сделать появление блока при прокрутке?

Имеется меню с кодом

<div id="header">
			<div class="content">
				<ul>
					<li><a href="">self22</a></li>
					<li><a href="">смысл</a></li>
					<li><a href="">результаты</a></li>
					<li><a href="">гарантии</a></li>
					<li><a href="">цена</a></li>
				</ul>
			</div>
</div>

Css меню

#header {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(248,248,248,.7);
}
#header .content ul {
	overflow: hidden;
	width: 605px;
	margin: auto;
}
#header .content ul li {
  float: left;
}
#header .content ul li a {
	display: block;
	font-family: BebasRegular;
	height: 52px;
	line-height: 60px;
	padding: 0 32.5px;
	font-size: 21px;
	color: #18202a;
	text-decoration: none;
	text-transform: uppercase;
}
#header .content ul li a:hover {
	background: #eee;
	color: #324257;
}

Необходимо, чтобы при прокрутке первого экрана Landing Page это меню появлялось, а если опять идет скролл вверх - меню исчезает.

<div id="wrapper">
		<div id="block-1">
<!-- если скролл вверх, то меню исчезает -->
		</div>
		<div id="block-2">
		<!-- при скролле вниз появляется меню -->
		</div>
</div>

Пример css блока. Все остальные точно такие же

#block-1 {
	height: 100vh;
	background: url(../img/image-1.png) no-repeat top left,
				url(../img/image-2.png) no-repeat top right;
	background-size: 235px;
	
}