I have developed an Angular app with a table-of-contents component that only displays two items.
The code for the script is as follows:
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 { }
}
html
<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;
}
The current behavior of my table-of-contents is to remain fixed while scrolling down. However, I want it to stick to the top right corner of the page and be in view at all times as the user scrolls up and down. How can I modify my code to achieve this?
In attempting to make this modification, I referenced the code on this page, but I am struggling to implement it in my own code. Can someone guide me through how to create a similar TableOfContent like the one on the tutorial page in a simple manner?