How to resolve this error? This site seems to use a "scroll-linked" positioning effect

Question

I am creating a landing page and am getting the following error: This site seems to use a "scroll-linked" positioning effect.

what I want to achieve is that when I scroll down the container becomes smaller along with the logo, all doing it with a transition until that point everything is correct, now what I need is that when the transition is applied I want to remove the padding from its parent container but I get the error that I already mentioned. I will leave the link so that you can see the clone that I want to make, it would be the part of the header, if someone could recommend me or rather correct the transition so that it looks better, I will appreciate it since I do not have much experience in it.

clone: ​​https://jankelley.com/ My project: https://unavenged-monitor.000webhostapp.com/

function scrollPage(){
  const $containerCenter = document.getElementById("container-center");
  const $logo = document.getElementsByClassName("logo")[0]
   document.addEventListener("scroll", e=>{
      if(scrollY > 0){
      $containerCenter.style.transition="all .5s ease";
      $containerCenter.style.height="45px"
      $logo.style.position="relative";
      $logo.style.top="15px";
      $logo.style.width="70px";
      $logo.style.heigth="58px";
      }
    })

}

 function quitPadding(){
  const $containerCenter = document.getElementById("container-center")
  if(window.scrollY > 0 ){
   
    $containerCenter.classList.toggle("active")
  }
}

scrollPage()
quitPadding()

.header{
    width: 100%;
    background: rgb(0, 0, 0);
    position: fixed;
    top: 0;
    z-index: 2;
}

.section-nav{
    width: 100%;
    max-width: 1500px;
    margin: auto;
    padding:30px 0 10px 0 ;
    color:white;
    display:flex;
    justify-content: space-between;
    align-items: center;
    font-family: RadikalRegular,Arial, Helvetica, sans-serif;
   
}
.section-nav .active{
    padding:5px 0 2px 0 ;
}
.container-center{
    display:flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: auto;
    height:77px;
    padding:0  50px 0 65px;
    overflow:hidden;
}

.logo{
    height:77px;
    width:91px;
    padding: 5px;
    
}

.logo .active{
    position: relative;
    top: 17px;
    width: 91px;
    height:58px;
    padding-top: 14px;
  
}

.nav-list a{
    display:inline-block;
    margin-left: 40px;
     color: white;
     text-decoration: none;
}

<div class="header">

      <div class="section-nav">
        <div class="container-center" id="container-center">
          <div class="nav-logo" id="nav-logo">
            <img src="/img/jankelley-white.3167130.0edc8aa9861676189c6b023aba4a3452.svg" class="logo" alt="">
          </div>

          <div class="nav-list">
            <a href="">About</a>
            <a href="">Our Work</a>
            <a href="">Toast + Jam</a>
            <a href="">Jobs</a>
            <a href="">Contact</a>
          </div>
        </div>

      </div>
    </div>