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

Question

[dboltachev]

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

<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;
	
}

Answer 1

[Виталий Инчин ☢]

document.addEventListener("scroll", function(){
    var elem = document.querySelector("#block-2");
    document.querySelector("#header > .content").classList[elem.getBoundingClientRect().top < window.innerHeight ? "add" : "remove"]("visible");
   //Когда оно должно быть "видимо", имеет класс visible
});

Comments

[dboltachev]

извини, но вообще не очень в js. Под ссылкой ты что подразумеваешь?
Все id точно такие же.

Answer 2

[Andrew]

Есть добротный плагин imakewebthings.com/waypoints (небольшое видео по использованию - www.youtube.com/watch?v=pS3dE5uoNKY )

Если Ваш лэндинг не ограничивается прилипанием меню после первого блока, то этот плагин поможет убрать рутину.

Answer 3

[Александр Решетняк]

без живого примера сложного вникнуть в тему)
возможно, что то вроде этого codepen.io/Vampireos/pen/EyOBYg

Comments

[Мария Иванникова]

красивый эффект