用sticky定位5分钟打造阅读目录导航

快速体验

1. 打开 InsCode(快马)平台 https://www.inscode.net
2. 输入框内输入如下内容：

   快速开发一个文章目录导航组件原型。功能要求：1. 左侧显示带标题层级的目录树 2. 右侧显示长篇文章内容(h2-h4标题结构) 3. 滚动时左侧目录自动高亮当前阅读章节 4. 点击目录可跳转到对应章节 5. 左侧目录在滚动时保持sticky定位 6. 响应式设计(桌面端左右布局，移动端上下布局)。使用Vue3实现，要求代码简洁可直接集成到现有项目，输出完整组件代码和样式。

3. 点击'项目生成'按钮，等待项目生成完整后预览效果

最近在整理技术文档时，发现长文章没有导航目录实在不方便阅读。于是研究了下如何快速实现一个跟随滚动自动高亮的目录导航组件，在这里分享我的实现思路。

1. 功能需求分析

首先明确这个目录组件需要实现的核心功能：

• 左侧显示文章标题层级结构（支持h2-h4）
• 右侧展示文章主体内容
• 滚动时自动高亮当前阅读章节
• 点击目录可快速跳转对应位置
• 左侧目录采用sticky定位保持可见
• 适配不同设备屏幕尺寸

2. 关键技术点

实现这个组件主要依赖几个关键技术：

1. position: sticky
2. 让目录栏在滚动时保持固定位置

3. 相比fixed定位更灵活，只在特定范围内生效

4. Intersection Observer API

5. 监听文章标题与视口的交叉状态

6. 比scroll事件性能更好，避免频繁计算

7. 响应式布局

8. 桌面端采用左右分栏
9. 移动端改为上下布局

3. 实现步骤详解

3.1 基础结构搭建

先创建基本的Vue组件框架，包含两个主要部分：

• 左侧目录区（aside元素）
• 右侧内容区（article元素）

给目录容器添加sticky定位样式，设置top值控制粘滞位置。

3.2 目录生成逻辑

1. 使用querySelectorAll获取所有标题元素
2. 遍历标题节点，提取层级关系和文本内容
3. 根据标题级别（h2/h3/h4）生成缩进结构
4. 为每个目录项绑定点击跳转事件

3.3 滚动高亮实现

1. 创建IntersectionObserver实例
2. 观察所有标题元素的可见性变化
3. 当标题进入视口时，获取其对应目录项
4. 移除旧的高亮样式，添加新的active类

3.4 响应式适配

通过CSS媒体查询实现布局切换：

• 桌面端：flex横向布局，左侧固定宽度
• 移动端：flex纵向布局，目录在上内容在下

4. 开发技巧分享

在实际开发中，我总结了几个实用技巧：

1. 性能优化
2. 对标题元素查询结果进行缓存

3. 使用requestAnimationFrame节流滚动事件

4. 边界情况处理

5. 处理最后一个章节的激活状态

6. 避免快速滚动时的高亮闪烁

7. 用户体验细节

8. 添加平滑滚动效果
9. 高亮过渡动画
10. 目录项悬停反馈

5. 实际应用效果

这个组件已经应用在我的技术博客中，效果很不错：

• 读者可以快速定位到感兴趣的章节
• 滚动时能清晰知道当前阅读位置
• 移动端体验也很流畅

整个开发过程在InsCode(快马)平台上完成，从构思到实现只用了不到半小时。这个平台内置的代码编辑器和实时预览功能让开发效率提升不少，特别是调试响应式布局特别方便。

对于需要部署的项目，平台还提供了一键上线功能，不用操心服务器配置。我的这个目录组件部署后可以直接作为独立模块集成到任何网站中。

如果你也需要为长文添加导航功能，不妨试试这个方案。通过合理使用sticky定位和现代浏览器API，可以轻松实现专业级的阅读体验。

快速体验

1. 打开 InsCode(快马)平台 https://www.inscode.net
2. 输入框内输入如下内容：

   快速开发一个文章目录导航组件原型。功能要求：1. 左侧显示带标题层级的目录树 2. 右侧显示长篇文章内容(h2-h4标题结构) 3. 滚动时左侧目录自动高亮当前阅读章节 4. 点击目录可跳转到对应章节 5. 左侧目录在滚动时保持sticky定位 6. 响应式设计(桌面端左右布局，移动端上下布局)。使用Vue3实现，要求代码简洁可直接集成到现有项目，输出完整组件代码和样式。

3. 点击'项目生成'按钮，等待项目生成完整后预览效果