Анимация появления и скрытия хедера на js

Делаю лендинг с анимацией хедера, где хедер изначально стоит на месте, но при достижении определённого скролла выдвигается плавно 0 и наоборот, при возвращении до того же уровня, задвигается. Получилось сделать только плавное выдвижение, но я использовал top свойства позиционирования, что кажется плохой идеей. Как реализовать эту анимацию?

html

<header class="header wrapper">
      <div class="header__wrap">
         <a class="header__logo" href="#!">
            <img src="./img/header/header-logo.svg" alt="Logo">
         </a>
         <div class="header__content">
            <nav class="header__nav">
               <ul class="header__links">
                  <li>
                     <a class="header__link" href="#about">
                        About us
                     </a>
                  </li>
                  <li>
                     <a class="header__link" href="#products">
                        Our Products
                     </a>
                  </li>
                  <li>
                     <a class="header__link" href="#delivery">
                        Delivery
                     </a>
                  </li>
               </ul>
            </nav>

            <div class="header__search">
               <div class="header__search-field">
                  <img src="./icons/search.svg" alt="Search">
                  <input type="text" id="search" autocomplete="off" placeholder="Cappuccino">
                  <section class="header__search-content" id="search-content"></section>
               </div>

               <button class="header__cart">
                  <img src="./icons/cart.svg" alt="Cart">
               </button>
            </div>
         </div>

         <button type="button" class="header__burger" id="header-burger">
            <span class="header__burger-line"></span>
            <span class="header__burger-line">
            </span>
            <span class="header__burger-line"></span>
         </button>

         <div class="cart">
            <ul class="cart__content">
               <li class="cart__title-wrap">
                  <p class="cart__title">Your selected products will be shown here</p>
               </li>
            </ul>
            <div class="cart__purchase" id="cart_purchase">
               <p class="cart__total-cost">
                  Total cost: <span id="cart_total-cost"></span>
               </p>
               <button class="cart__buy-btn" id="cart_purchase-btn" type="button">
                  Order
               </button>
            </div>
         </div>
      </div>
   </header>

scss

.header {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 100%;
   margin-top: 42px;
   transition: top 0.2s linear;
   z-index: 500;

   &--scrolled {
      position: fixed;
      top: -100%;
      margin-top: 0;
      animation-name: scrolledHeader;
      animation-duration: 0.2s;
      animation-fill-mode: forwards;

      .header__wrap {
         padding: 12px 25px;
         background-color: $peach;
         border-radius: 30px;
         box-shadow: 0 0 20px 0 rgba($gray, 0.2);
      }

      .header__search-content{
         top: 65px;
      }
   }

   @keyframes scrolledHeader {
      0% {
         top: -100%;
      }
      100% {
         top: 10px;
      }
   }
}

js

window.addEventListener('scroll', () => {
   const header = document.querySelector('header');

   if (scrollY > 400) {
      header.classList.add('header--scrolled');
   }
   else {
      header.classList.remove('header--scrolled');
   }
});