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
    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
    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
    el 26 ago. 2020 a las 4:06

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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