Блог

Главная - Вопросы по программированию - Прозрачная панель навигации не становится прозрачной после функции onscroll

Прозрачная панель навигации не становится прозрачной после функции onscroll

#javascript #html #css #navbar

#javascript #HTML #css #панель навигации

Вопрос:

Итак, я готовлюсь к конкурсу веб-дизайна и тестировал прозрачную панель навигации, которая станет белой, если значение 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>

Комментарии:

1. У меня все работает нормально. Пожалуйста, убедитесь, что у вас не кэширована старая версия вашего JS.

2. спасибо, просто попробовал еще раз, и это сработало