Skip to main content
se eliminaron 161 caracteres en el cuerpo
Origen Enlace
user128299
user128299

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

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

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,

Origen Enlace

Tengo un problema, con la barra de navegacion, de un sitio web

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

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

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