• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

195
Vistas
when i scroll down the window it is not removing or adding the active class

I am not able to use the classList.remove('active')when scroll down despite my code is same as shown in the tutorial i am following also when i click #search-btn it is not removing the active class from navbar

let searchForm = document.querySelector('.search-form');



 document.querySelector('#search-btn').onclick = () => {
   searchForm.classList.toggle('active');
   navbar.classList.remove('active');
 }



let navbar = document.querySelector('.nav_bar');

document.querySelector('#menu-btn').onclick = () => {
 navbar.classList.toggle('active');
 searchForm.classList.remove('active');
}



 window.onscroll = () => {
  searchForm.classList.remove('active');
  navbar.classList.remove('active');

{

    if (window.scrollY > 0) {
        
     document.querySelector('.header').classList.add('active');

    } else {
        
    
   document.querySelector('.header').classList.remove('active');
       }
    }
   }
   

 I am not able to use the classList.remove('active')when scroll down despite my code is same as shown in the tutorial i am following 

also when i click #search-btn it is not removing the active class from navbar

 the html code i use contain nav_bar class in nav and search-form class in form in these classes i am not able to add .active class by using queryselector 

  <nav class="nav_bar">
        <a href="#home">home</a>
        <a href="#offers">offers</a>
        <a href="#destinations">destinations</a>
        <a href="#packages">packages</a>
        <a href="#contact">contact</a>
    </nav>

    <div class="icons">
        <div id="menu-btn" class="fas fa-solid fa-bars"></div>
        <div id="search-btn" class="fas fa-solid fa-search"></div>
        <div class="fas fa-solid fa-shopping-cart"></div>
        <div class="fas fa-solid fa-user"></div>

    </div>


    <form action="" class="search-form">
        <input type="search" placeholder="search here ...." 
  id="input- 
  box">
        <label for="input-box" class="fas fa-search"></label>
    </form>
</header>
almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

First of all I need more context (html) to know why your button clicking is not working correctly. Nonetheless I can give you an answer why the scrolling part doesnt work.

First you need to change if (window.screenY > 0) to window.scrollY > 0 to get the actual position of the scrolling.

Then change document.querySelectorAll('.header') to document.querySelector('.header') because querySelectorAll gives you a list of nodes wich you would have to change all separately to achieve your goal.

As I said, if you give me more context I can look in to your second problem as well.

almost 3 years ago · Juan Pablo Isaza Denunciar

0

You have a problem with this:

    if (window.screenY > 0) {
        
     document.querySelectorAll('.header').classList.add('active');

    } else {
        
    
   document.querySelectorAll('.header').classList.remove('active');
       }

querySelectorAll returns a collection of all the elements with class header.

If you know you only have one such element then you can use document.querySelector('.header') as this selects the first one it comes across.

However, if you have several and you want to select them all you need to go through each one in the collection, for example using:

  document.querySelectorAll('.header').forEach

Using your browser's dev tools inspection facility you will see that your code gives an error because it was trying to find the classList of a null element given querySelectorAll returns a collection not a single element.

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda