如何创建一个固定的侧边栏导航，突出显示页面的当前查看部分

Question

这看起来应该很简单，但我很难找到如何实现它的示例。当我滚动到页面上链接指向的相应id时，我不知道如何突出显示侧边栏链接。以下是微软文档网站上的一个例子(右侧边栏(：

https://learn.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-6.0

Answer 1

您需要在侧边栏中添加一个具有特定top属性的位置。有关更多信息，您可以阅读本文。如何使用两行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>