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;
}

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

我只是不明白为什么会发生这种事，这让我发疯如果您需要任何其他可能有帮助的详细信息，请告诉我

Answer 1

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

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