position: sticky 不能直接用于垂直导航标签页，因其仅在滚动方向生效，垂直滚动时无效；需用 position: fixed 配合 scroll 监听与 scrollIntoView 实现平滑吸顶及锚点避让。
position: sticky 能不能直接用于垂直导航标签页
不能直接用。vertical 标签页通常指左侧或右侧固定宽度的导航栏（比如 <aside></aside> 或 <nav class="vertical-nav"></nav>），而 position: sticky 的“粘性”只在**滚动方向上生效**：对垂直导航来说，它只能在**水平滚动时吸边**（如 overflow-x: auto 的窄屏场景），但绝大多数情况下用户是垂直滚动页面，此时 sticky 对侧边栏完全无效。
真正能实现“垂直导航随页面滚动保持可见”的，只有 position: fixed —— 但它会脱离文档流，可能遮挡内容、影响锚点定位、破坏语义结构。
- 别指望给
.vertical-nav { position: sticky; left: 0; top: 0; }加个top就能吸顶——sticky的触发依赖父容器滚动，而垂直导航的父容器往往不滚动 - 如果硬套
sticky，常见现象是：滚动时导航突然消失、位置跳变、或只在极窄视口下才“动一下” - 移动端 Safari 对
sticky在非顶部/非左侧方向的支持更差，iOS 15.4 之前基本不可靠
用 fixed + scroll 监听实现“平滑吸顶切换”的关键点
所谓“平滑吸顶切换”，其实是两件事：一是让垂直导航固定在视口一侧（fixed），二是当用户滚动到某区块时，高亮对应标签（视觉切换），并可选地微调导航位置（比如避开吸顶 header）。
核心不是动画，而是状态同步与时机控制：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 监听
window.scrollY，用getBoundingClientRect()判断每个目标区块（如section#design）是否进入视口，再更新.vertical-nav a.active类 - 避免在
scroll回调里反复读取 DOM 偏移——用requestAnimationFrame节流，只在帧空闲时计算一次 - 不要用
display: none控制导航显隐，改用transform: translateX(-100%)或opacity: 0，否则会触发重排且无法硬件加速 - 若页面已有吸顶
header，垂直导航的top值需动态减去其高度，否则会被遮住；可用document.querySelector('header').offsetHeight获取
锚点跳转时如何避免 fixed 导航遮挡目标内容
点击左侧标签跳转到 #project-2，结果发现目标元素被固定在左侧的导航栏盖住了——这是 fixed 元素层叠和滚动定位偏移共同导致的。
解决方法不是调 scroll-margin-left（它只对 scroll-behavior: smooth 和原生锚点有效，且仅支持 top/right/bottom/left，不支持 “left” 方向的平滑偏移），而是手动接管跳转逻辑：
- 阻止默认行为：
event.preventDefault() - 用
element.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })滚动 - 滚动完成后，再用
window.scrollTo()微调横坐标偏移（比如left: 280，刚好绕开 260px 宽的导航栏） - 或者更稳妥：给每个目标
section加一个隐藏的<span id="anchor-project-2" class="anchor-offset"></span>，并设position: absolute; left: -260px;，这样锚点跳转实际定位到偏移后的位置
为什么不用 JS 插件，而推荐手写逻辑
市面上多数“垂直标签页插件”默认绑定在 body 上、强依赖 jQuery、或把所有标签渲染为 tab 面板（实际是切换 display），这和语义化锚点导航的设计初衷相悖。
真实项目中容易踩的坑包括：
- 插件内部用
href="#"+onclick，破坏可访问性，屏幕阅读器无法识别跳转目标 - 未处理单页应用（SPA）路由变化，切换页面后监听器未销毁，造成内存泄漏
- 在
IntersectionObserver中未设rootMargin，导致区块刚露头就触发高亮，体验突兀 - 忽略 iOS Safari 对
fixed+transform组合的渲染 bug，出现闪烁或错位
真正轻量可控的做法，是只监听 scroll、只操作 class、只在必要时微调 scrollTo —— 复杂点在于滚动阈值判断和跨设备兼容，而不是代码行数。
