when i scroll down the window it is not removing or adding the active class-CodePudding

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>

CodePudding user response：

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.

CodePudding user response：

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.