Показывать липкий div при прокрутке вверх?

Question

У меня есть 2 бара - Основной и Вторичный навигационный бар , как показано на рисунке ниже. При прокрутке вниз дополнительная полоска становится липкой, а основная скрывается.

Кодовая ссылка

Когда я прокрутите вверх, мне нужно первичное, чтобы появиться снова: первичное и вторичное должны быть липкими , пока они не достигнут вершины.

.top-container {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

.header {
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 102px;
} 

JS Код

window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}