sticky定位失效主因是父容器设overflow:hidden/auto或高度不足；需三层嵌套结构：外层flex布局、中层设min-height:100vh、内层position:sticky；响应式下移动端应退化为静态布局。
sticky定位为什么在目录跟随中经常失效
直接给position: sticky加top: 0却没反应？大概率是父容器设置了overflow: hidden或overflow: auto——sticky的“粘性”会被这些属性截断。另外，sticky元素必须有明确的“容器边界”，如果父级高度不够（比如只够显示几行文字），它根本没机会触发粘住行为。
常见错误场景包括：
• 目录包裹在div里，而该div设了overflow: hidden（常用于卡片裁剪）
• 目录父容器未设置height或max-height，导致其高度塌缩为内容高度
• 使用了flex布局但未给侧边栏容器设align-items: flex-start，造成基线偏移影响定位计算
侧边目录的最小可行sticky结构
要让目录真正“跟住”，HTML结构和CSS必须协同约束边界。核心是三层嵌套：外层容器定义滚动上下文，中间层提供sticky锚点，内层才是目录本身。
<div class="article-wrapper">
<main class="article-content">...</main><aside class="toc-container"><nav class="toc-sticky"><h2>目录</h2>
<ul><li><a href="#sec1">第一节</a></li></ul></nav></aside>
</div>
对应关键CSS：
• .article-wrapper需设display: flex且不设overflow
• .toc-container需设height: 100vh或min-height: 100vh（确保有足够滚动空间）
• .toc-sticky设position: sticky、top: 1rem（预留导航栏间隙）、align-self: flex-start
响应式断点下sticky目录的适配要点
移动端屏幕窄，侧边栏强行固定会挤占正文，此时sticky应退化为普通静态块。不能只靠@media切position，还要同步处理布局流。
推荐做法：
• 桌面端（≥768px）：.toc-container { width: 240px; } + .toc-sticky { position: sticky; }
• 移动端（.toc-container { width: 100%; position: static; } + .toc-sticky { position: static; }，并用margin-top: 1.5rem保持与上文间距
• 注意：若用display: none隐藏目录，会导致DOM重排延迟，建议用visibility: hidden配合height: 0和overflow: hidden更平滑
滚动时目录锚点高亮不同步怎么办
sticky只管定位，不管高亮。要实现滚动到某节时对应目录项变色，得靠JavaScript监听scroll并比对getBoundingClientRect().top。但别用offsetTop——它不随sticky变化实时更新。
实操建议：
• 用IntersectionObserver替代scroll事件，性能更好、兼容性够（Chrome 51+/Firefox 55+）
• 观察目标设为每个章节section，阈值设[0.1]（10%进入视口即触发）
• 高亮逻辑：先清除所有.toc-item.active，再给当前可见章节对应的a[href="#xxx"]加active类
• 注意：若章节高度小于视口，多个section可能同时触发，取entries[0].target最靠上的那个即可
sticky目录看着简单，实际卡点全在边界条件：父容器溢出、高度坍缩、断点切换时的布局回流、以及高亮与滚动的时机差。这些地方一松动，整个跟随效果就断联。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
