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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-30

浏览次数：次

返回列表

答案是使用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. 实现文章目录悬停

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

<div class="sidebar">
  <n* class="toc">
    <h3>目录</h3>
    <ul>
      <li><a href="#section1">第一节</a></li>
      <li><a href="#section2">第二节</a></li>
    </ul>
  </n*>
</div>

添加如下CSS：

来画数字人|直播|

来画数字人自动化|直播|，无需请真人主播，即可实现24小时|直播|，无缝衔接各大|直播|平台。

57 查看详情来画数字人直播

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