Create a sticky sidebar in html for a handbook - html

Question

I will program a sticky sidebar inside a grid layout. I have made a screenshot
from my fist try to build this html page. I don't want use javascript. In the
css file I have used position: fixed. It should be positoin: sticky. How do I get
the sticky sidebar into the grid? If I klick on the link on the right side the the left side should move to the top.
Here the html page
.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>
Introduction
</li>
<li>
How to create a strong password
</li>
</ul>
</fieldset>
</div>
</div>
</div>
</div>
</section>