Animowane przyklejane menu

pytanie zadane 12 września 2016 w HTML i CSS przez Madar Obywatel (1,560 p.)

Witam
Piszę stronkę, mniej więcej taką:
https://blackrockdigital.github.io/startbootstrap-agency/

I natknąłem się na problem, ostatnio mi bardzo pomogliście, więc mam nadzieję, że i tym razem mogę na was polegać :)

Więc do rzeczy. Chodzi o animowane menu sticky. Miałem pewną koncepcję jak to zrobić, ale nie wiem czy jest ona do końca poprawna. Poniżej podaję kod:

<!doctype html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<div class="menu__fixed--hidden"></div>
		<h1>Lorem ipsum.</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab expedita corporis consectetur impedit aliquam laborum quidem nostrum placeat atque odio!</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis architecto, dolore ullam consectetur fuga fugiat est amet. Quos, omnis ipsam repellat perferendis laboriosam consequatur odio et tempore nesciunt, atque harum totam, animi aliquid cum sapiente beatae numquam doloremque dolores.</p>
		<h2>Lorem ipsum dolor.</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aut consequuntur aliquam, ipsa eius sint, ex molestiae repellendus veritatis labore quo odio, optio velit non nemo ipsum asperiores nam ullam. Nihil necessitatibus repellat, in molestias voluptatum ad incidunt nisi sint corporis dignissimos eligendi facilis quisquam autem tenetur suscipit ullam quibusdam!</p>
		<h1>Lorem ipsum.</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab expedita corporis consectetur impedit aliquam laborum quidem nostrum placeat atque odio!</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis architecto, dolore ullam consectetur fuga fugiat est amet. Quos, omnis ipsam repellat perferendis laboriosam consequatur odio et tempore nesciunt, atque harum totam, animi aliquid cum sapiente beatae numquam doloremque dolores.</p>
		<h2>Lorem ipsum dolor.</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aut consequuntur aliquam, ipsa eius sint, ex molestiae repellendus veritatis labore quo odio, optio velit non nemo ipsum asperiores nam ullam. Nihil necessitatibus repellat, in molestias voluptatum ad incidunt nisi sint corporis dignissimos eligendi facilis quisquam autem tenetur suscipit ullam quibusdam!</p>
		<h1>Lorem ipsum.</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab expedita corporis consectetur impedit aliquam laborum quidem nostrum placeat atque odio!</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis architecto, dolore ullam consectetur fuga fugiat est amet. Quos, omnis ipsam repellat perferendis laboriosam consequatur odio et tempore nesciunt, atque harum totam, animi aliquid cum sapiente beatae numquam doloremque dolores.</p>
		<h2>Lorem ipsum dolor.</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aut consequuntur aliquam, ipsa eius sint, ex molestiae repellendus veritatis labore quo odio, optio velit non nemo ipsum asperiores nam ullam. Nihil necessitatibus repellat, in molestias voluptatum ad incidunt nisi sint corporis dignissimos eligendi facilis quisquam autem tenetur suscipit ullam quibusdam!</p>

		<script src = "js.js"></script>
	</body>
</html>

body	{
	background: #AAAAAA;
	color:white;
	margin:0;
}
p 	{
	font-size:1.6rem;
}
h1 	{
	color:#000000;
}
h2 {
	color:#111111;
}

.menu__fixed--hidden	{
	width:100%;
	height:5rem;
	background: #000000;
	position:fixed;
	top:0;
	display:none;
}

.open	{
	display:block;
	background: #fff;
}

(function()	{

var add__class = document.querySelector(".menu__fixed--hidden");

document.addEventListener('scroll', function()	{
	if (document.body.scrollTop >=20)	{
		add__class.classList.add("open");
	}	else 
		add__class.classList.remove("open");
	
}, false);
})();

Stworzyłem prototyp, zeby sprawdzic czy tak się w ogóle da to rozwiązać. Otóż JS działa, gdyż po zescrollowaniu na 20px tworzy klasę "open", która wyświetla menu ustawione pozycją fixed caly czas u góry. Chciałbym jednak, aby to odbyło się w sposób jak na stronie w załączonym linku. Próbowałem dodać transition, ale nie zadziałało. Czy ktoś ma pomysł na to, jak można to rozwiązać?

2 odpowiedzi

odpowiedź 12 września 2016 przez mitelak Pasjonat (23,330 p.)

Prawie wszystko masz dobrze, tylko na display block nie działa transition, a na stronie przykładowej zmienia się padding elementów w środku przez co wygląda to jak animowane ;)
Jeżeli chcesz żeby belka Ci się animowała cała (na przykład zjeżdżała na dół) to najlepiej zrobić sobie animacje @keyframes, która zmieniać będzie opacity i transitionY ;)

edit// lepszym rozwiązaniem jest zrobienie sobie menu takiego jak będzie wyglądać i później dodanie klasy po zjechaniu i przez tą klase zmienić wygląd menu i dodać fixed