Javascript 如何根据IF-ELSE结果有条件地更改函数中的变量？

我有导航栏，滚动后它的颜色从黑色变为白色。 在这个导航栏上，我有一些文字，我已经在滚动时改变了文字的颜色。 但问题是，我有一个onmouseover JS事件，它在悬停时改变颜色，然后在onmouseout上又回到了先前的颜色。 当导航条处于暗div时，导航条就没有背景和白色字母，在onmouseover上，导航条将变为金色，然后变回白色。 然后当我向下滚动到white div时，导航栏也是白色的，字母是黑色的，在onmouseover上它又变成了金色（这很好），但它又变成了白色——它们应该是黑色的，这就是全部问题所在

我曾尝试将homemouseover和homemouseout函数放在if和else中，但它们在那里加倍，所以我认为这就是它们不起作用的原因。 我也尝试过让css中所有的颜色元素都悬停，但它不起作用

<div id="nav-bar">
  <div id="nav-bar-top">
    <div id="nav-bar-home" onmouseover="homemouseover()" onmouseout="homemouseout()" onClick="home(); homedel()">
      START
    </div>
  </div>
</div>

我希望有如下悬停：

• dark div=导航栏上没有背景，文本颜色为白色，悬停时像白金白色
• white div=导航栏上的白色背景，文本颜色为黑色，悬停方式为黑色-金色-黑色

---

这可以用css来完成，但我更喜欢用JS来解决，谢谢。

如果使用css类，会更简单。然后，您只需添加和删除相应的类即可应用不同的样式

window.onscroll = function() {scrollFunction()};


//function to read a scroll level, and then set background and text color for my navigation bar

function scrollFunction() {
  if (document.body.scrollTop > 30 || document.documentElement.scrollTop > 30) {

    document.getElementById("nav-bar").style.backgroundColor = "rgba(255, 255, 255, 1)";
    document.getElementById("nav-bar-home").style.color = "#000000";

  } else {

    document.getElementById("nav-bar").style.backgroundColor = "rgba(255, 255, 255, 0)";
    document.getElementById("nav-bar-home").style.color = "#FFFFFF";

  }
}

//two functions which works as a hovers

function homemouseover() {
    document.getElementById("nav-bar-home").style.color = "#E3B200";
}

function homemouseout() {
    document.getElementById("nav-bar-home").style.color = "#FFFFFF";
}