I try to fix a header stycky with html & JavaScript but it doesn't work. Please find my code below.

<header>
    <a href="#" class="logo"><span>P</span>etits<span>S</span>oins</a>
    <ul class="navbar">
    <li><a href="#">Accueil</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Qui sommes nous</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
</header>

<script type="text/javascript">
    window.addEventListener('scrol', function(){
      const header = document.querySelector('header');
      header.classList.toggle("sticky", window.scrollY > 0);
    });
 </script>


header.sticky{
   background: #fff;
padding: 10px 10px;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
position: -webkit-sticky;/*Safari*/
position: sticky;
top: 0;
}
header.sticky .logo{
color: #000;
}
header.sticky .navbar li a{
color: #000;
}
header.sticky .navbar li a:hover{
color:#333;
border-bottom: 2px solid #333;
}

Could you please help me to find a solution so that it works?

Thankyou Andreea