用sticky定位5分钟打造阅读目录导航
快速体验
- 打开 InsCode(快马)平台 https://www.inscode.net
- 输入框内输入如下内容：
快速开发一个文章目录导航组件原型。功能要求：1. 左侧显示带标题层级的目录树 2. 右侧显示长篇文章内容(h2-h4标题结构) 3. 滚动时左侧目录自动高亮当前阅读章节 4. 点击目录可跳转到对应章节 5. 左侧目录在滚动时保持sticky定位 6. 响应式设计(桌面端左右布局，移动端上下布局)。使用Vue3实现，要求代码简洁可直接集成到现有项目，输出完整组件代码和样式。 - 点击'项目生成'按钮，等待项目生成完整后预览效果
最近在整理技术文档时，发现长文章没有导航目录实在不方便阅读。于是研究了下如何快速实现一个跟随滚动自动高亮的目录导航组件，在这里分享我的实现思路。
1. 功能需求分析
首先明确这个目录组件需要实现的核心功能：
- 左侧显示文章标题层级结构（支持h2-h4）
- 右侧展示文章主体内容
- 滚动时自动高亮当前阅读章节
- 点击目录可快速跳转对应位置
- 左侧目录采用sticky定位保持可见
- 适配不同设备屏幕尺寸
2. 关键技术点
实现这个组件主要依赖几个关键技术：
- position: sticky
- 让目录栏在滚动时保持固定位置
相比fixed定位更灵活，只在特定范围内生效
Intersection Observer API
- 监听文章标题与视口的交叉状态
比scroll事件性能更好，避免频繁计算
响应式布局
- 桌面端采用左右分栏
- 移动端改为上下布局
3. 实现步骤详解
3.1 基础结构搭建
先创建基本的Vue组件框架，包含两个主要部分：
- 左侧目录区（aside元素）
- 右侧内容区（article元素）
给目录容器添加sticky定位样式，设置top值控制粘滞位置。
3.2 目录生成逻辑
- 使用querySelectorAll获取所有标题元素
- 遍历标题节点，提取层级关系和文本内容
- 根据标题级别（h2/h3/h4）生成缩进结构
- 为每个目录项绑定点击跳转事件
3.3 滚动高亮实现
- 创建IntersectionObserver实例
- 观察所有标题元素的可见性变化
- 当标题进入视口时，获取其对应目录项
- 移除旧的高亮样式，添加新的active类
3.4 响应式适配
通过CSS媒体查询实现布局切换：
- 桌面端：flex横向布局，左侧固定宽度
- 移动端：flex纵向布局，目录在上内容在下
4. 开发技巧分享
在实际开发中，我总结了几个实用技巧：
- 性能优化
- 对标题元素查询结果进行缓存
使用requestAnimationFrame节流滚动事件
边界情况处理
- 处理最后一个章节的激活状态
避免快速滚动时的高亮闪烁
用户体验细节
- 添加平滑滚动效果
- 高亮过渡动画
- 目录项悬停反馈
5. 实际应用效果
这个组件已经应用在我的技术博客中，效果很不错：
- 读者可以快速定位到感兴趣的章节
- 滚动时能清晰知道当前阅读位置
- 移动端体验也很流畅
整个开发过程在InsCode(快马)平台上完成，从构思到实现只用了不到半小时。这个平台内置的代码编辑器和实时预览功能让开发效率提升不少，特别是调试响应式布局特别方便。
对于需要部署的项目，平台还提供了一键上线功能，不用操心服务器配置。我的这个目录组件部署后可以直接作为独立模块集成到任何网站中。
如果你也需要为长文添加导航功能，不妨试试这个方案。通过合理使用sticky定位和现代浏览器API，可以轻松实现专业级的阅读体验。
快速体验
- 打开 InsCode(快马)平台 https://www.inscode.net
- 输入框内输入如下内容：
快速开发一个文章目录导航组件原型。功能要求：1. 左侧显示带标题层级的目录树 2. 右侧显示长篇文章内容(h2-h4标题结构) 3. 滚动时左侧目录自动高亮当前阅读章节 4. 点击目录可跳转到对应章节 5. 左侧目录在滚动时保持sticky定位 6. 响应式设计(桌面端左右布局，移动端上下布局)。使用Vue3实现，要求代码简洁可直接集成到现有项目，输出完整组件代码和样式。 - 点击'项目生成'按钮，等待项目生成完整后预览效果
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考