Два "Бар-меню" на одной странице

Question

Подскажите как сделать так, что бы исчезание и появление меню-навигации "navbar2" появлялось\работоло после чёрного фона, а на чёрнов фоне работоло только "navbar". Вот так:

вот мой код и на всей странице работает "navbar2", помогоите пожалуйсто решить проблему.)

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar2").style.top = "0";
  } else {
    document.getElementById("navbar2").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#navbar { 
  position: fixed; 
  top: 0;
  width: 100%; 
  transition: top 0.3s;
}


#navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 15px;
  text-decoration: none;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar2{
  background-color: #333;
  position: fixed; 
  top: 0;
  width: 100%; 
  transition: top 0.3s;
}

#navbar2 a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 15px;
  text-decoration: none;
}

#navbar2 a:hover {
  background-color: #ddd;
  color: black;
}

.black{
  background-color: black;
  width: 1900px;
  height: 1200px;
}

.white{
  background-color: white;
  width: 1600px;
  height: 1200px;
}

<div id="navbar">
    <a href="#home">Главная</a>
    <a href="#news">Новости</a>
    <a href="#contact">Контакты</a>
</div>

<div id="navbar2">
    <a href="#home">Главная</a>
    <a href="#news">Новости</a>
    <a href="#contact">Контакты</a>
</div>

<section class="black">
    <p>Hello world!</p>
</section>

<section class="white">
    <p>Information!</p>
</section>

БЛОГ НА HUSL

Два "Бар-меню" на одной странице

Ответы (0 шт):