Навбар не останется на месте даже при абсолютном позиционировании

Question

Я пытаюсь создать личный сайт / сайт-портфолио, который имеет горизонтальный пользовательский интерфейс, где пользователь может прокручивать вверх или вниз, и вместо вертикального перемещения дисплей продолжает двигаться горизонтально. К счастью, я решил это. Однако, когда я пытаюсь реализовать панель навигации, которая должна оставаться неизменной на протяжении всей горизонтальной прокрутки, она никогда не делает и просто остается в своем фиксированном положении. Я думаю, что проблема возникает из-за того, что я взял из Интернета некоторый код о том, как создать веб-сайт с горизонтальной прокруткой. С этого сайта: https://redstapler.co/pure-css-horizontal-scrolling-website-tutorial/

и он имеет некоторую кодировку, которая создает две оболочки div. В целом, есть три возможных места, где я могу разместить свою панель навигации: в самом внешнем div, в div второго уровня и в div, который является первым окном просмотра / страницей.

Я пытался разместить панель навигации во всех элементах div и пытался изменить положение с фиксированного на абсолютное, и в каждом отдельном случае панель навигации не может оставаться на своем месте, чтобы она моглавидно из любого места, где пользователь находится на сайте.

Вот мой HTML

 <div class="outside-wrapper">

      <div class="scrolling-wrapper" id="scrolling-wrapper">
        <!-- One Div - Nav Bar-->
        <div class="nav">
          <a href="#home" class="home">Home</a>
          <a href="#aboutme" class="aboutme">About Me</a>
          <a href="#research" class="research">Research & Design</a>
          <a href="#full" class="full">Full-Stack Projects</a>
          <a href="#skills" class="skills">Skills</a>
          <a href="#resume" class="resume">Resume</a>
          <a href="#contact" class="contact">Contact</a>
        </div>
        <!-- One Div - First Viewport -->
        <div class="box one"><h2 class="box-text">Box</h2>

          <!-- The NAVBAR -->
          <!-- <div class="nav">
            <a href="#home" class="home">Home</a>
            <a href="#aboutme" class="aboutme">About Me</a>
            <a href="#research" class="research">Research & Design</a>
            <a href="#full" class="full">Full-Stack Projects</a>
            <a href="#skills" class="skills">Skills</a>
            <a href="#resume" class="resume">Resume</a>
            <a href="#contact" class="contact">Contact</a>
          </div> -->
        </div>

Вот соответствующий CSS у меня

.scrolling-wrapper {
display: flex;
flex-direction: row;
width: 700vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
}

.outside-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
scrollbar-width: none;
-ms-overflow-style: none;
}
::-webkit-scrollbar {
  display: none;
}


.box {
    width: 100vw;
    height: 100vh;
    /* border: 2px solid black; */
  }

  .box-text {
    opacity: 0;
  }

.nav {
  background-color: white;
  overflow: hidden;
  position: absolute;
  top: 0px;
}

Как я уже говорил, все результаты похожи, как только я размещаюон находится в верхнем левом углу экрана и позиционируется как абсолютный; после прокрутки навигационная панель прокручивает все остальное содержимое и остается на первом «порту просмотра»