No puedo usar classList.remove('active')cuando me desplazo hacia abajo a pesar de que mi código es el mismo que se muestra en el tutorial que estoy siguiendo también cuando hago clic en #buscar-btn no está eliminando la clase activa de la barra de navegación
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 followingtambién cuando hago clic en #buscar-btn no elimina la clase activa de la barra de navegación
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>En primer lugar, necesito más contexto (html) para saber por qué el clic de su botón no funciona correctamente. No obstante, puedo darte una respuesta de por qué la parte de desplazamiento no funciona.
Primero debe cambiar if (window.screenY > 0) a window.scrollY > 0 para obtener la posición real del desplazamiento.
Luego, cambie document.querySelectorAll('.header') a document.querySelector('.header') porque querySelectorAll le brinda una lista de nodos que tendría que cambiar por separado para lograr su objetivo.
Como dije, si me das más contexto, también puedo analizar tu segundo problema.
Tienes un problema con esto:
if (window.screenY > 0) { document.querySelectorAll('.header').classList.add('active'); } else { document.querySelectorAll('.header').classList.remove('active'); }querySelectorAll devuelve una colección de todos los elementos con encabezado de clase.
Si sabe que solo tiene uno de esos elementos, puede usar document.querySelector('.header') ya que esto selecciona el primero que encuentra.
Sin embargo, si tiene varios y desea seleccionarlos todos, debe revisar cada uno de la colección, por ejemplo, usando:
document.querySelectorAll('.header').forEachUsando la función de inspección de herramientas de desarrollo de su navegador, verá que su código da un error porque estaba tratando de encontrar la lista de clases de un elemento nulo dado querySelectorAll devuelve una colección, no un solo elemento.