javascript - 启用滚动功能后，透明导航栏不会变得透明

Question

所以，我正在为网页设计比赛做准备，我正在测试一个透明的导航栏，如果 pageYOffset 大于 100，它将变为白色，但是现在，当我在 100px 范围内向后滚动时，导航栏仍然是白色的。

这是我的代码

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>

标签： javascripthtmlcssnavbar