Problemas ao suavizar a transição do elemento navbar

Front-end
, ,
#1

Boas colegas estou com o seguinte problema num projecto de website. Criei um navbar com ajuda do bootstrap para agilizar o processo e tal… Então decidi adicionar uma funcionalidade que ao rolar para baixo esse navbar ficaria estático e haveria de diminuir a sua altura em conjunto com a imagem de logo… Até aí tudo bem, mas complicou quando quis suavizar a mudança do navbar estático alterado pelo scroll para o navbar inicial porque era muito brusca, criei uma regra do css com a propriedade transition para a tag NAV, mas não suavizou de todo, ou seja não fiz correctamente ou não era o que eu queria… Abaixo deixarei o código html, css e js para uma ajuda…

HTML

<header>
            <nav class="navbar navbar-expand-lg navbar-light">

                <a href="index.html" class="navbar-brand">
                    <img src="_imgs/IMG_28082020 mini-Logotipo.png" alt="logotipo" loading="lazy" class="logo">
                </a>

                <button class="navbar-toggler" type="button" data-toggle="collapse"
                    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <i class="fas fa-bars navbar-toggler-icon"></i>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a href=#"" class="nav-link active">...</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">...</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">...</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">...</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">...</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">...</a>
                        </li>
                    </ul>
                </div>

            </nav>

        </header>

        <!-- 

    Hero Section
    -->

        <div class="hero container-fluid">
            <h1 class="h1">....</h1>
            <hr class="hr-hero">
        </div>

CSS

nav {
  background-color: #fff !important;
  height: auto;
} 

.logo{
  width: 114.99px;
  height: 109.99px;

}

.active-scrolling{
  background-color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 2px 2px 6px rgba(31, 30, 30, 0.3);
  height: 5em;
}

.active-scrolling .logo{
  width: 69px;
  height: 66px;
}

div.hero {
  padding: 70px 0;
  background-image: linear-gradient(120deg, #d5fc79e1 0%, #7ec588 100%);
  box-shadow: 3px 3px 12px rgba(31, 30, 30, 0.3);

}

JS

function activeOnScrolling() {
    const nav = document.querySelector("nav");
    const windowPosition = window.scrollY > 0;

    if (windowPosition) {
        nav.classList.add("fixed-top");
        nav.classList.toggle("active-scrolling", windowPosition);
    } else {
        setTimeout(function () {
            nav.classList.remove("fixed-top", "active-scrolling")
        }, 200);
    }
}

Nos documentos HTML evoquei o método através do evento scroll

 window.onload = function () {
                document.addEventListener("scroll", handleScroll);
                scrollToTopButton.addEventListener("click", scrollToTopAction);        
                document.addEventListener("scroll", activeOnScrolling);
            }