1

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,

2 respuestas 2

1

Funciona cuando eliminas if (typeof toggle !== 'undefined') y pones classList (no classlist).

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

Así se ve sin mover el scroll: introducir la descripción de la imagen aquí

Así se ve cuando muevo el scroll: introducir la descripción de la imagen aquí

2
  • Me podrías mandar el código modificado, porque ya probé y no me funciona. Gracias
    – Deivid
    Commented el 26 ago. 2020 a las 3:59
  • Muchísimas gracias amigo, me comí como 2 horas buscando solución a esto. Gente como tu necesita este mundo, se los agradezco muchísimo
    – Deivid
    Commented el 26 ago. 2020 a las 4:08
0

La primera validación de togle !== undefined no se para que funciona, pero eso genera que no se ejecute el eventlistener de el scroll.

Ademas corregi la propiedad classList.

header.classList.toggle("sticky", window.scrollY > 0);

Y para que el stiky funcione correctamente, tienes que agregar el position en el css.

position: sticky;

@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{
  position: sticky;
  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='prueba.css'>

  </head>

  <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">
          window.addEventListener("scroll", function () {
              var header = document.querySelector("header");
              header.classList.toggle("sticky", window.scrollY > 0);
          })
      </script>
  </body>

</html>

1
  • Muchas Gracias Amigo, no puedo creer que por una L, me comi 1 a 2 horas buscando solucion.
    – Deivid
    Commented el 26 ago. 2020 a las 4:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.