Faire disparaître un menu fixe au scroll

Bonjour,

J'arrive à faire apparaître mon menu, mais pas à le faire disparaître avec la même animation

Le menu est déjà présent dès le chargement de la page.
Quand on scroll > 700, la classe header-animated s'ajoute dans le DOM, et quand on arrive à 800, le menu apparaît.

Quand on scroll vers le haut, jusqu'à 700, le menu disparaît bien, mais sans animation.

J'utilise pas jQuery.

<header class="header" id="autofixed" role="banner">
...
</header>

window.addEventListener('scroll', () => {
	(function scroll() {
		const header = document.getElementById('autofixed')
		if(header) {
			if(window.pageYOffset > 700){
				header.classList.add('header-animated');
			} else {
				header.classList.remove('header-animated');
			}
			if (window.pageYOffset > 800) {
				header.classList.add('fixed-top');
			} else {
				header.classList.remove('fixed-top');
			}
		}
	})();
});

CSS :

.header {
	background-color: #000;
	height: 60px;
}
.header-animated {
	transition: margin-top .3s ease-in-out;
	margin-top: -10rem;
}
.fixed-top {
	transition: margin-top .3s ease-in-out;
	margin-top: 0!important;
}

Merci pour votre aide
Modifié par Nikoola (10 Jul 2020 - 20:39)

Hello,
Ta transition doit être simplement définie une seule fois sur header. Actuellement, lorsque tu supprimes ta class, tu supprimes la transition liée

Seconde chose, j’utiliserais une position relative et un top: -60px a la place du margin négatif. La raison est que pour un élément, si tu le gardes dans le flux (comme tout les éléments de bases qui ne sont pas en absolute/fixed), si tu le change de place avec ce margin négatif, tout le contenu qui le suit remontera aussi pour le suivre.
Avec une position relative, l’élément garde la place qui lui est attribuée dans le layout et ensuite il y a décalage qui est fait (mais tout en gardant son espace initial).

Et dernière chose, ce qui pourrait être intéressant visuellement c’est d’avoir aussi une animation sur l’opacité lorsque le header quitte la page pour ce soit smooth.