Javascript函数不是执行而是执行第一条指令

这是一个奇怪的问题，我对此感到困惑，我有一个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;
}

在header.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">

我只是不明白为什么会发生这种事我快疯了

---

如果您需要任何其他可能有帮助的细节，请告诉我

您显然在某个地方有冲突的风格。它可能是css中样式的顺序，也可能是包含了另一个更具体的css。增加风格的特异性通常比仅仅使用更有效！重要的是，因为有两种样式可以使用！重要的

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

我的直觉是，将ID添加到样式将增加足够的特异性，从而使样式生效

此外，您应该删除这些可能有不良行为的代码行（如果有）：

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");

---

请编辑您的问题，并用您当前的代码替换图像。@AnuragBhagsain最好是在问题中的此处，而不是在其他网站上。很抱歉，我的坏@VLAZ我不知道这一点。我是个新手questions@Triby我改了你的代码没有意义。classList.add可以添加类。字符串中不应该有任何选择器。这是没有意义的，所以idk你想做什么。谢谢你的人，事实上，引导css覆盖了我的，它包括在页脚与其余的脚本，非常感谢！！