滚动功能后，透明Navbar不会变为透明

Question

所以，我正在为Web设计竞赛做准备，并且我正在测试一个透明的导航栏，如果pageYOffset大于100，它将变成白色，但是现在，当我滚动回到100px范围时，导航栏仍然是白色。 / p>

这是我的代码

window.onscroll = function() {
  var navbar = document.getElementsByClassName('navbar')[0];

  if (window.pageYOffset > 100) {
    navbar.style.background = "#fff";
  } else {
    navbar.style.background = "transparent";
  }
}

.navbar {
  height: 50px;
  width: 100%;
  font-family: Arial;
  position: fixed;
  background: transparent;
  color: #fff;
  top: 0;
  left: 0;
}

.navbar h3 {
  float: left;
  margin-left: 30px;
  margin-top: 20px;
}

.navbar a {
  float: right;
  padding: 18px;
  margin-right: 30px;
  text-decoration: none;
  color: #333;
}

/** FOR TESTING IN SNIPPET */
body {
  height: 1000px;
  background: red;
}

<div class="navbar">
  <h3>OmniFoods</h3>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</div>