Javascript функция не запускается, а первая инструкция

Question

Это странный вопрос о том, что я теряю голову из-за этого, у меня есть функция JS, которая раньше работала отлично, пока я не перешел к модели MVC, функция javascript должна перевернуть цвета панель навигации на прокрутке (панель навигации белая с серым текстом, когда я прокручиваю, она должна быть серой с белым текстом)

Вот код функции

window.addEventListener("scroll", function () {
  const mainNav = document.getElementById("navbar");

  if (this.window.pageYOffset > 0) {
    mainNav.classList.add("navscroll");
    mainNav.classList.add("navscroll a");
    mainNav.classList.add("navscroll #navcustom_1:hover");
    mainNav.classList.add("navscroll #navcustom_2:hover");
    mainNav.classList.add("navscroll #navcustom_3:hover");
  } else {
    mainNav.classList.remove("navscroll");
    mainNav.classList.remove("navscroll a");
    mainNav.classList.remove("navscroll #navcustom_1:hover");
    mainNav.classList.remove("navscroll #navcustom_2:hover");
    mainNav.classList.remove("navscroll #navcustom_3:hover");
  }
});

Перед прокруткой

После прокрутки только первая строка не работает

Код CSS, если это помогает

.navscroll {
  background-color: #3f3f3f !important;
}

.navscroll a {
  color: white !important;
}

.navscroll #navcustom_1:hover {
  color: #b82be2 !important;
}

.navscroll #navcustom_2:hover {
  color: #e25822 !important;
}

.navscroll #navcustom_3:hover {
  color: #2e8b57 !important;
}

#navcustom_1:hover {
  border-bottom: 4px solid #40d9ac;
  color: #b82be2;
}

#navcustom_2:hover {
  border-bottom: 4px solid #40d9ac;
  color: #e25822;
}

#navcustom_3:hover {
  border-bottom: 4px solid #40d9ac;
  color: #2e8b57;
}

Включает в заголовок. php, который требуется на всех других страницах

<!-- ? CustomCssLink -->
<link rel="stylesheet" href="../CSS/style.css" />
<!-- ? JSLink -->
<script src="../JS/functions.js"></script>

Вот сама панель навигации

<nav class="navbar navbar-expand-md navbar-light bg-white sticky-top" id="navbar">
        <div class="container-fluid" id="containerF">
            <a class="navbar-brand" href="index.html">
                <h3>WildCampers</h3>
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto" id="navbarAuto">

Я просто не понимаю, почему это происходит, это сводит меня с ума, если вам нужны другие подробности, которые могут помочь, просто дайте мне знать

Answer 1

Видимо, у вас где-то есть конфликтующий стиль. Это может быть порядок стилей в вашем css, или, возможно, добавляется другой css, более конкретный c. Повышение специфичности стиля обычно более эффективно, чем просто использование! Important, так как два стиля могут иметь! Important.

#navbar.navscroll {
  background-color: #3f3f3f !important;
}

Я догадываюсь, что добавление идентификатора к стилю увеличит специфичность настолько, что стиль вступит в силу.

ДОПОЛНИТЕЛЬНО, вы должны удалить эти строки кода, которые могут иметь нежелательное поведение, если таковые имеются:

mainNav.classList.add("navscroll a");
mainNav.classList.add("navscroll #navcustom_1:hover");
mainNav.classList.add("navscroll #navcustom_2:hover");
mainNav.classList.add("navscroll #navcustom_3:hover");