Angular中如何让table-of-contents组件滚动时固定在页面右上角

你现有的.tableOfContentContainer已经使用了position: fixed定位，之所以仅在向下滚动时可见、向上滚动时消失，核心是两个配置缺失：一是没有明确设置top属性，固定定位的参考位置不明确，二是z-index层级不足，容易被页面顶部导航、PDF查看器等其他元素遮挡。

仅需要修改CSS代码即可实现需求，无需调整TS和HTML文件：

修改.tableOfContentContainer样式 #

将原有样式替换为以下内容，可根据你的页面实际效果调整数值：

.tableOfContentContainer {
    right: 100px;
    position: fixed;
    top: 20px; /* 调整为你需要的距离页面顶部的距离，如果页面有固定头部，可设置为头部高度避免重叠 */
    z-index: 9999; /* 足够高的层级，保证目录始终在所有页面元素上方显示 */
    padding-top: 1em;
    /* 以下是可选美化配置，不需要可删除 */
    background: #ffffff;
    padding: 12px 16px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

可选：小屏幕适配 #

如果需要避免小屏幕下目录遮挡PDF内容，可追加媒体查询样式：

@media (max-width: 1200px) {
  .tableOfContentContainer {
    right: 16px;
    max-width: 200px;
  }
}

修改完成后目录会始终固定在页面右上角，无论上下滚动都保持可见。

内容的提问来源于stack exchange，提问作者Reem Al-Assaf