• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

194
Views
cuando me desplazo hacia abajo en la ventana, no elimina ni agrega la clase activa

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 following

tambié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>
almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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.

almost 3 years ago · Juan Pablo Isaza Report

0

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').forEach

Usando 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.

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error