TableOfContent在滚动时粘在右上角

我已经在我的Angular应用中创建了一个table-of-contents组件，只有两个项目要显示。

我为每个脚本编写了以下代码:

ts

import { Component, OnInit } from '@angular/core';
import { pdfDefaultOptions } from 'ngx-extended-pdf-viewer';
@Component({
selector: 'app-table-of-contents',
templateUrl: './table-of-contents.component.html',
styleUrls: ['./table-of-contents.component.css']
})
export class TableOfContentsComponent implements OnInit {
AOK_pdf_viewer_source: string = "/assets/AOK_T2DM.pdf";
constructor() { pdfDefaultOptions.assetsFolder = 'assets'; }
ngOnInit(): void { }
}

<div class="tableOfContentContainer">
<div class="tableOfContent docs-toc-container">
<div class="docs-toc-heading">Table of Contents</div>
<nav>
<a
href="../assets/AOK_T2DM.pdf"
class="docs-level-h3 docs-link ng-star-inserted"
>Download AOK Brochure</a
>
<br />
<a
href="https://scholar.google.at/scholar?as_ylo=2021&q=diabetes&hl=en&as_sdt=0,5&as_vis=1"
class="docs-level-h3 docs-link ng-star-inserted"
>2021 Articles on Diabetes</a
>
</nav>
</div>
</div>
<div class="container">
<ngx-extended-pdf-viewer
[src]="AOK_pdf_viewer_source"
[height]="'100%'"
width="100%"
[useBrowserLocale]="true"
backgroundColor="#000000"
[textLayer]="true"
[showHandToolButton]="true"
zoom="page-width"
>
</ngx-extended-pdf-viewer>
</div>

css

.tableOfContentContainer {
right: 100px;
position: fixed;
padding-top: 1em;
}
.docs-toc-container {
border-left: 4px solid #3f51b5;
font-weight: 700;
}
a {
text-decoration: none;
color: #737373;
font-size: 16px;
font-weight: 400 !important;
}
a:hover {
color: #3f51b5;
}
.tableOfContent {
padding: 5px 0 10px 10px;
font-size: 23px;
}

我的目录在向下滚动时固定在页面上，这是我最初想要的。

我应该在代码中做些什么来改变它的行为，让它保持在页面的右上角，并在用户上下滚动页面时始终保持在视图中?

注。我正在看这个页面上的代码，但不能弄清楚如何修改我的代码。有人能帮助我了解我如何能实现类似的tableofcontentas本教程页面，但非常简单吗?

.tableOfContentContainer {
position: sticky;
padding-left: 100px;
top: 1em;
z-index: 9999;
}