Как сделать плавное появление фиксированой шапки (прилипающего меню)?

Прописал код, при скроле все работает как надо, меню появляеться со всеми нужными стилями, но само появление шапки очень резкое. Есть ли способ сделать переход плавным?

Вот ссылка на проект: https://plupiks.github.io/active-box/

<header class="header" id="header">
    <div class="container">
        <div class="header__inner">
            <div class="header_logo">
                <img src="img/activebox_logo.png" alt="">
            </div>

            <nav class="nav">
                <a class="nav_link" href="#">Features</a>
                <a class="nav_link" href="#">Works</a>
                <a class="nav_link" href="#">Our Team</a>
                <a class="nav_link" href="#">Testimonials</a>
                <a class="nav_link" href="#">Download</a>
            </nav>

            <button class="burger" type="button">
                <span class="burger__item">Menu</span>
            </button>
        </div>
    </div>
</header>

.header {
  width: 100%;
  height: 100px;

  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
}

.header.fixed {
  position: fixed;
  height: auto;
  background-color: #1f3162;
}

.header.fixed .header__inner {
  padding: 15px 0;

  border-bottom: 0;
}

.header__inner {
  display: flex;
  justify-content: space-between;

  border-bottom: 1px solid #64677d;
  padding: 35px 0;
  align-items: center;
}

$(function() {

    let header = $("#header");
    let headerH = header.innerHeight();
    let scrollPos = $(window).scrollTop();


    $(window).on("scroll load resize" , function() {
        scrollPos = $(this).scrollTop();
        if( scrollPos > headerH ) {
            header.show("slow").addClass("fixed");
        } else {
            header.removeClass("fixed");
        }

        console.log(scrollPos);
    });




});