soy principiante estoy iniciando, en esto de la programación web
Se supone que al hacer scroll, el header debería de cambiar de class, a sticky, pero no sucede. 
Y la barra debería quedarse blanca.
Aqui les va un poco de codigo

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    @import url('https://fonts.googleapis.com/css2?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
    *
    {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
    }
    body{
        background: #000;
        min-height: 200vh;
    }

    header{
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       display: flex;
       justify-content: space-between;
       align-items: center;
       transition: 0.6s;
       padding: 40px 100px
      
    }
    header.sticky{
        padding: 5px 100px;
        background: #fff;
    }
    header .logo{
        position: relative;
        font-weight: 700;
        color: #fff;
        text-decoration: none;
        font-size: 2em;
        text-transform: uppercase;
        letter-spacing: 2px;
        transition: 0.6s;
    }
    header ul{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    header ul li{
        position: relative;
        list-style: none;
    }
    header ul li a{
        position: relative;
        margin: 0 15px;
        text-decoration: none;
        color: #fff;
        letter-spacing: 2px;
        font-weight: 500px;
        transition: 0.6s;
    }
    .banner{
        position: relative;
        width: 100%;
        height: 100vh;
        background: url(bg.jpg);
        background-size: cover;
    }
    header.sticky .logo,
    header.sticky ul li a{
        color: #000;
    }

<!-- language: lang-html -->

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset='utf-8'>
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <title>Tu Web Perfecta</title>
        <link rel='stylesheet' type="text/css" href='styles.css'> 
     
        <style>

         
          </style> 
    </head>
    <body>
        <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" rightmargin="0"> 
       <header>
         <a href="#" class="logo">Logo</a>
         <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">Sobre Nosotros</a></li>
           <li><a href="#">Servicios</a></li>
           <li><a href="#">Contacto</a></li>
           <li><a href="#">Porfolio</a></li>
         </ul>
       </header>
       <section class="banner">
       </section>
       <script type="text/javascript">
       if (typeof toggle !== 'undefined')
       window.addEventListener("scroll", function(){
         var header = document.querySelector("header");
         header.classlist.toggle("sticky", window.scrollY > 0 );
       })
      </script>
        </body>   
    </html>

<!-- end snippet -->

Al hacer scroll, la barra de navegación, debería quedar con fondo blanco, letra negra.
por favor ayuda
Para mi es un error en el código de javascript, 
njfnjgfkhfghjhkjghjhhhjjhhj,hj,h,hj,hmhmhjmhjmhmhmh
mhmhmhmhmh
mhmhmhmh
mhmhmhmhh
mhmhmhmhmjh,hgnjhgnmhnmhm
nghmghj,nmghnmghj,mkngffffvb