Intento arreglar un encabezado pegajoso con html y JavaScript, pero no funciona. Encuentre mi código a continuación.

 <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; }

¿Podrían por favor ayudarme a encontrar una solución para que funcione?

gracias andrea