即使绝对定位，导航栏也不会停留在

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;
}

正如我已经提到的，只要将其放置在屏幕的左上角并将其放置为绝对位置，所有结果都将相似，一旦滚动，导航栏就会与所有其他内容一起滚动并停留在第一个“查看端口”