当我滚动时，垂直导航栏与 header 分开

Question

我正在创建一个垂直导航栏，我想将其固定在左侧并让容器占据 window 的整个高度。在我向下滚动之前，它很好而且花花公子。下面的图片将说明一切。

这里看起来不错

这里看起来不太好

HTML

<h1>Blazing Bevy</h1>

<nav>
    <ul>
        <li>
            <NavLink href="/">Play</NavLink>
        </li>
        <li>
            <NavLink href="/About">About</NavLink>
        </li>
    </ul>
</nav>

CSS

nav {
    border-right: 10px solid #626262;
    height: 100vh;
    position: fixed;
    width: 6.5rem;
}

Answer 1

如果你想用 header 和 nav(sidenav) 滚动，那么你也应该固定 header 如果你只想用 sidenav 滚动，那么你应该像这样使用 sticky

 nav {
border-right: 10px solid #626262;
height: 100vh;
position: sticky;
width: 6.5rem;
}

Answer 2

以下是我使用 CSS 网格的方法：将 body 设为网格容器，并将其分为顶部、侧面和主要部分，并给出scroll 的 overflow-y 个主要部分。

body {
  padding: 0;
  margin: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 20fr;
}

body > * {
  padding: 1em;
  border: 0.5em solid black;
  background: gray;
}

header {
  grid-column: span 2;
}

main {
  overflow-y: scroll;
}

<header>
  <h1>Blazing Bevy</h1>
</header>
<nav>
  <ul>
    <li>
      <a href="/">Play</a>
    </li>
    <li>
      <a href="/About">About</a>
    </li>
  </ul>
</nav>
<main>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
</main>

当我滚动时，垂直导航栏与 header 分开

Vertical Nav bar separates from header when I scroll

html

css

styling

navbar