答案是使用position: sticky可实现目录悬停，top值控制触发位置。1. 基本语法与原理：sticky结合relative与fixed特性，元素在滚动到设定的top阈值时从相对定位转为固定定位，如top: 10px即距视口10px时粘住。
使用CSS中的position: sticky可以轻松实现文章目录在页面滚动时悬停在视口顶部的效果，同时通过top属性精确控制其粘性定位的触发位置。
1. 基本语法与原理
position: sticky是相对定位（relative）和固定定位（fixed）的结合体。元素在正常文档流中表现为相对定位，当滚动到特定阈值时，变为固定定位。
关键点是设置top值，它决定了元素在距离视口顶部多远时“粘住”。
-
top: 10px表示元素滚动到距视口顶部10px时开始固定 - top则
sticky不生效 - overflow: hidden或
overflow: auto限制，否则会失效
2. 实现文章目录悬停
假设你有一个侧边栏目录结构：
立即学习“前端免费学习笔记（深入）”；
<div class="sidebar">
<nav class="toc">
<h3>目录</h3>
<ul>
<li><a href="#section1">第一节</a></li>
<li><a href="#section2">第二节</a></li>
</ul>
</nav>
</div>
添加如下CSS：
.toc {
position: -webkit-sticky; /* 兼容 Safari */
position: sticky;
top: 20px; /* 距离顶部20px时开始悬停 */
background: white;
padding: 16px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
这样当用户向下滚动页面，目录滚动到距离视口顶部20px时就会固定在此位置，直到父容器（如.sidebar）滚动出视口范围。
3. 控制悬停位置的技巧
top值的选择应考虑页面中其他固定元素的高度，比如导航栏。
- top: 60px可让目录刚好悬浮在导航栏下方
- top值（如
10px）可以让目录更早贴顶 - top值以适应不同屏幕
基本上就这些。只要注意父级容器不要截断溢出、正确设置top值，并处理好浏览器兼容性，就能稳定实现目录悬停效果。不复杂但容易忽略细节。
