右侧悬浮导航必须用 position: fixed，关键参数为 right: 20px、top: 50%、transform: translateY(-50%)；ul 需清 margin/padding；锚点#top-anchor 必须置于 body 开头并设 position: absolute；高亮菜单项应优先用 IntersectionObserver，触屏需兼容 :focus 和 ontouchstart。
右侧悬浮导航必须用 position: fixed，别碰 float 或 flex 推位置
用 float: right 或 justify-content: flex-end 做“右侧悬浮”，本质是把元素塞进容器右边缘——一旦页面滚动、容器高度变化或父级 overflow: hidden，它立刻消失或错位。真正可靠的锚定方式只有一种：position: fixed。
关键参数组合不能拆：必须同时设 right: 20px（留出可点击边距）、top: 50%（以视口中心为基准）、再加 transform: translateY(-50%)（精确垂直居中）。只写 top: 50vh 是错的——视口高度变化（比如手机横竖屏切换）时会偏移。
-
ul标签必须清除默认margin和padding，否则上下白边不可控，居中失效 - 结构推荐语义化写法：
<nav class="rnav"><ul><li><a href="#section1">第一部分</a></li></ul></nav>，避免用div+onclick模拟跳转，否则破坏键盘导航和 SEO - 小屏适配时，不要直接
display: none，而是用transform: translateX(100%)收起，并在右侧预留 10px 宽触发区供手指滑入
#top-anchor 锚点要放在 position: absolute
返回顶部功能最简方案就是原生锚点，不用 JS。但很多人把 <div id="top-anchor"></div> 插在 <header></header> 里或中间位置，结果点击后页面停在 header 下方——因为锚点被 header 的 margin/padding 或定位遮挡了。
正确做法是：把这个锚点放在 最开头、<header></header> 之前，且加 position: absolute; top: 0; left: 0;，确保它精准落在文档流顶端坐标 (0, 0)。它本身不占空间，也不需要 visible。
立即学习“前端免费学习笔记（深入）”；
- 返回按钮的
href必须写成href="#top-anchor"，不能漏掉# - 如果页面顶部有吸顶导航栏（比如
position: sticky），锚点跳转后内容会被导航栏盖住——此时要在body上加scroll-margin-top，值等于导航栏高度，例如scroll-margin-top: 60px - IE 不支持
scroll-margin-top，老版本需用 JS fallback：监听hashchange，然后window.scrollTo({ top: 0, behavior: 'smooth' })
高亮当前菜单项得用 IntersectionObserver，不是 scroll 事件
靠监听 window.onscroll 算每个 section 距离顶部的像素来判断“当前在哪”，性能差、卡顿明显，而且在快速滚动或 touch 设备上极易误判。现代浏览器应直接用 IntersectionObserver 监听目标区块是否进入视口。
它天然支持阈值控制（比如设 threshold: 0.1 表示 10% 进入就触发），且不阻塞主线程。重点是：观察器实例必须在 DOM 加载完成后初始化，且每个 section 都要提前设好唯一 id（如 id="section1"），和菜单里的 href="#section1" 严格对应。
- 不要给所有
section同时设observer.observe()，先查document.querySelectorAll('section[id]')再遍历，避免对无 ID 元素报错 - 回调函数里用
entries[0].target.id获取当前进入视口的区块 ID，再匹配菜单中对应a[href$="..."的元素加class="active" - 兼容性注意：
IntersectionObserver在 iOS Safari ≤ 12.1 不可用，需检测typeof IntersectionObserver === 'undefined'后降级为 scroll + getBoundingClientRect
悬停交互和 z-index 容易被忽略的细节
右侧悬浮菜单常被其他绝对定位元素（比如弹窗、广告条、吸顶导航）遮挡，根本原因是没设 z-index，或者设了但祖先元素触发了层叠上下文（如父级有 transform、filter、opacity ），导致子元素的 <code>z-index 失效。
另外，悬停背景色变化若只写 :hover，在触屏设备上会残留高亮态（iOS Safari 尤其明显），必须配合 :focus 和媒体查询 @media (hover: hover) 做区分。
- 菜单容器层级建议设
z-index: 1000，返回顶部按钮设z-index: 1010，确保按钮永远在菜单上方 - 悬停样式推荐用
transition: background-color 0.2s ease，别用opacity动画，否则影响可访问性（屏幕阅读器可能跳过半透明内容） - 触屏设备上，首次点击会触发
:hover但不跳转，第二次才生效——加ontouchstart=""到a标签可提前激活伪类
