Как вернуться к className, когда меню скрыто

Question

Я бы хотел, чтобы мобильное меню изменяло цвет и высоту фона с (10% до 100%. Когда меню активно, навигация - активен при наведении курсора на всю страницу для затемнения)

const nav = document.getElementById("navigation");
const burger = document.getElementById("mobileBurger");
const menu = document.getElementById("mobileMenu");

burger.addEventListener("click", function() {
  nav.classList.toggle("nav--active");

  if (nav.classList.contains("nav--scroll")) {
    nav.classList.remove("nav--scroll");
  }

  console.log(nav.classList.contains("nav"));
});

window.addEventListener("scroll", function() {
  let scrolled = window.pageYOffset;

  if (scrolled >= 40) {
    nav.classList.add("nav--scroll");
  } else nav.classList.remove("nav--scroll");
});

Когда навигация - „nav-scrolled », и я нажимаю кнопку, затем я хотел бы оставить только class =« nav nav-active ».Хорошо, я сделал это, но как вернуться к «nav-scrolled» после скрытия меню.Конечно, только когда у него был этот класс?

Answer 1

Я попробовал это для вас, но HTML-код был бы полезен для проверки.Уведомление переместило проверку прокрутки в отдельную функцию для вызова при необходимости.

const nav = document.getElementById("navigation");
const burger = document.getElementById("mobileBurger");
const menu = document.getElementById("mobileMenu");

burger.addEventListener("click", function() {
  // toggle returns a true or false based on if it adds/removes
  if( nav.classList.toggle("nav--active") == false) {
    // if it added (made inactive), lets check and see if scroll also applies.
    checkScrolled();
  } else {
    if (nav.classList.contains("nav--scroll")) {
      nav.classList.remove("nav--scroll");
    }
  }

  console.log(nav.classList.contains("nav"));
});

window.addEventListener("scroll", function() {
  checkScrolled();
});

function checkScrolled() {
    let scrolled = window.pageYOffset;

  if (scrolled >= 40 && nav.classList.contains("nav--scroll") == false) {
    nav.classList.add("nav--scroll");
  } else { 
    nav.classList.remove("nav--scroll"); 
  }
}