当我向下滚动窗口时，它不会删除或添加活动类

Question

尽管我的代码与我正在关注的教程中显示的相同，但向下滚动时我无法使用 classList.remove('active') 同样，当我单击#search-btn 时，它不会从导航栏中删除活动类

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 

当我点击#search-btn 时，它不会从导航栏中删除活动类

 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>

Answer 1

您对此有疑问：

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

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

querySelectorAll 返回带有类头的所有元素的集合。

如果你知道你只有一个这样的元素，那么你可以使用 document.querySelector('.header') 因为这会选择它遇到的第一个元素。

但是，如果您有多个并且想要选择它们，则需要遍历集合中的每个，例如使用：

  document.querySelectorAll('.header').forEach

使用浏览器的开发工具检查工具，您会看到代码出错，因为它试图查找空元素的 classList，因为 querySelectorAll 返回的集合不是单个元素。

Answer 2

首先，我需要更多上下文 (html) 来了解您的按钮单击无法正常工作的原因。尽管如此，我可以给你一个答案，为什么滚动部分不起作用。

首先您需要将if (window.screenY > 0) 更改为window.scrollY > 0 以获取滚动的实际位置。

然后将document.querySelectorAll('.header') 更改为document.querySelector('.header')，因为querySelectorAll 为您提供了一个节点列表，您必须单独更改所有节点才能实现目标。

正如我所说，如果你给我更多的背景信息，我也可以研究你的第二个问题。