所以我得到的是一个登陆页面，应该显示a.）一个标题B.）一个大图片，充满桌面和c.）一个导航栏。导航栏应该沿着页面滚动，一旦它到达页面的顶部。
现在，我知道的唯一确保所有这三个元素完全适合桌面视口的方法是使用max-height：100 vh在一个父元素中。然而，我想让导航条在它到达屏幕顶部时沿着。当导航条在它自己的容器中时，这是不可能的，因为它在到达容器底部时会停止滚动。
有人知道修复方法吗？下面是我现在尝试使用的结构示例：

<div class="container-top">
  <header>
    <!--- ...header content... -->
  </header>

  <div>
    <img src="1080p_image.png">
  </div>

  <nav class="sticky-top">
    <!-- ...navbar content... -->
  </nav>
</div>

<div class="other-content">
    <!-- ...other content... -->
</div>

.container-top{
  max-height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

img{
  width: 100vw;
}

header{
  background-color: darkgray;
  height: 5rem;

  z-index: 1;
}

nav{
  background-color: darkgray;
  height: 5rem;

  z-index: 1;
}

.sticky-top{
  position: sticky;
  top: 0;
}

.other-content{
  height: 100rem;
}