как сделать элемент nav внутри элемента заголовка с помощью javascript

Question

Я пытаюсь создать элемент <nav> внутри элемента header, чтобы он прикреплялся вверху, когда он достигает определенного значения pageoffset, я знаю, что если элемент <nav> находится вне тега заголовка, мой код будет работать, но есть ли способ заставить его работать внутри тега <header>. Я добавил фрагмент ниже:

document.addEventListener("scroll", function() {
  if (window.pageYOffset > 80) {
    let nav = document.getElementById("nav");
    nav.style.position = "sticky";
    nav.style.top = "0";
    nav.style.width = "100%";
  } else {
    nav.style.width = "80%";
  }
});

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top__header {
  width: 100%;
  height: 80px;
  background-color: red;
}

.nav {
  display: flex;
  color: #fff;
  background-color: #000;
  width: 80%;
}

.nav a {
  text-decoration: none;
  color: inherit;
  padding: 8px 10px;
}

<header class="header">
  <div class="top__header">Header</div>
  <nav class="nav" id="nav">
    <a href="#">nav1</a>
    <a href="#">nav2</a>
    <a href="#">nav3</a>
    <a href="#">nav4</a>
  </nav>
</header>