This seems like it should be simple but I'm having a hard time finding an example of how to implement this. I cannot figure out how to get the sidebar links to highlight when I scroll to the respective id that the link points to on the page. Here is an example of this on the Microsoft Docs site (the righthand sidebar):
https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-6.0
You need to add a position sticky to your sidebar with the specific top property. for more information, you can read this article. How to make a sticky sidebar with two lines of CSS
.app {
display: flex;
justify-content: space-between;
min-height: 100vh;
}
aside {
width: 33%;
border: 1px solid lightgray;
position: sticky;
top: 0;
height: 100vh;
}
main {
width: 66%;
}
main div {
min-height: 300px;
margin: 10px;
width: 100%;
border: 1px solid red;
}<div class="app">
<aside>Sticky Sidebar</aside>
<main>
<div>section</div>
<div>section</div>
<div>section</div>
<div>section</div>
<div>section</div>
<div>section</div>
<div>section</div>
<div>section</div>
</main>
</div>