html - 在 html 中为手册创建一个粘性侧边栏

Question

我将在网格布局中编写一个粘性侧边栏。我用我的拳头制作了一个截图，尝试构建这个 html 页面。我不想使用 javascript。在 css 文件中，我使用了 position: fixed。它应该是positoin：粘性。如何将粘性侧边栏放入网格？如果我点击右侧的链接，左侧应该移到顶部。

这里是html页面

.section-t {
  margin-top: 10rem;
  margin-bottom: 6rem;
  min-height: calc(100vh - 30rem);
}

.section-t .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
}

.sidebar {
  position: fixed;
  top: 10rem;
  right: 3rem;
  width: 450px;
}

.item12 {
  grid-column: 1 / span 2;
}

.card {
  background-color: var(--white-color);
  border: solid 1px #757575;
  border-radius: 0.4rem;
  padding: 1em;
}

<section class="section-t">
  <div class="container">
    <div class="item12 card">
      <h1>Handbook</h1>
      <hr />
      <h3>Introduction</h3>
      <p>
        Hello Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
      </p>
    </div>
    <div class="item12 card">
      <h1>Help Pages</h1>
      <hr />
      <h3>General</h3>
      <p>
        Hello Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
      </p>
    </div>
    <div>
      <div class="card sidebar">
        <h1>Table of contents</h1>
        <hr />
        <div>
          <fieldset>
            <ul>
              <li>
                <a href="introduction">Introduction</a>
              </li>
              <li>
                <a href="strong-password">How to create a strong password</a>
              </li>
            </ul>
          </fieldset>
        </div>
      </div>
    </div>
  </div>
</section>

标签： htmlcsscss-grid