Прозрачный Navbar не становится прозрачным после функции прокрутки - PullRequest
Новая
       12

Прозрачный Navbar не становится прозрачным после функции прокрутки

0 голосов
/ 23 апреля 2019

Итак, я готовлюсь к конкурсу веб-дизайна и тестирую прозрачную панель навигации, которая станет Белой, если pageYOffset больше 100, но теперь, когда я прокручиваю назад в диапазоне 100 пикселей, панель навигации остается белой.

Вот мой код 

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