如何在CSS中使用sticky实现文章目录悬停效果_top控制位置-css教程-PHP中文网

如何在CSS中使用sticky实现文章目录悬停效果_top控制位置

P粉602998670

发布： 2025-11-30 19:50:47

原创

298人浏览过

答案是使用position: sticky可实现目录悬停，top值控制触发位置。1. 基本语法与原理：sticky结合relative与fixed特性，元素在滚动到设定的top阈值时从相对定位转为固定定位，如top: 10px即距视口10px时粘住。

如何在css中使用sticky实现文章目录悬停效果_top控制位置

使用CSS中的position: sticky可以轻松实现文章目录在页面滚动时悬停在视口顶部的效果，同时通过top属性精确控制其粘性定位的触发位置。

1. 基本语法与原理

position: sticky是相对定位（relative）和固定定位（fixed）的结合体。元素在正常文档流中表现为相对定位，当滚动到特定阈值时，变为固定定位。

关键点是设置top值，它决定了元素在距离视口顶部多远时“粘住”。

top: 10px 表示元素滚动到距视口顶部10px时开始固定
top则sticky不生效
overflow: hidden或overflow: auto限制，否则会失效

2. 实现文章目录悬停

假设你有一个侧边栏目录结构：

立即学习“前端免费学习笔记（深入）”；

Logomaster.ai

Logo在线生成工具

查看详情

<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）滚动出视口范围。