绝大多数情况应选 position: fixed——它脱离文档流、贴住视口边缘且滚动稳定；sticky 依赖父容器高度和滚动上下文，易因 height 缺失或 overflow: hidden 失效。
侧边栏用 position: fixed 还是 position: sticky？
绝大多数情况该选 position: fixed——它能真正脱离文档流、始终贴住视口边缘，滚动时稳如磐石；position: sticky 看似简单，但依赖父容器高度和滚动上下文，稍不注意就失效（比如父元素没设 height 或被 overflow: hidden 截断）。
实操建议：
-
fixed侧边栏必须手动设置top和left（或right），并考虑顶部导航栏高度（例如top: 64px） - 为避免遮挡正文，正文区域要加等宽的
margin-left（左栏）或margin-right（右栏） - 移动端需用媒体查询把
fixed改为static或用按钮控制显隐，否则会挤占窄屏空间
浮动菜单点击后如何高亮当前项？
纯 CSS 无法监听点击并持久标记“当前页”，必须靠 JS 绑定事件 + 操作 class。常见错误是只改 onclick 内联样式，导致刷新即丢失，或没清除上一项的 active 类。
正确做法：
- 给每个菜单
加唯一data-href或直接用href值做标识 - 页面加载后，用
window.location.pathname匹配当前路径，给对应链接加class="active" - 点击时，先用
document.querySelectorAll('.sidebar a').forEach(...)清掉所有active，再给目标加 - CSS 中写
.sidebar a.active { background-color: #007bff; color: white; }即可生效
侧边栏内容太多时怎么支持滚动且不卡主页面？
直接在侧边栏容器上设 overflow-y: auto 很危险：如果父元素没设固定高度，滚动条可能出不来；更糟的是，某些浏览器（尤其 Safari）在 fixed 元素内滚动时会触发整个页面抖动。
稳妥方案：
- 给侧边栏容器明确设
height: calc(100vh - 64px)（减去 header 高度），再加overflow-y: auto - 务必加
-webkit-overflow-scrolling: touch（iOS 平滑滚动） - 避免在侧边栏里放
iframe或视频等重资源——它们会放大滚动卡顿 - 测试时用真机滚动，模拟器常掩盖 Safari 的渲染问题
为什么侧边栏在手机上点不动？
最常见原因是 z-index 层级被遮挡：比如轮播图、弹窗、广告位用了超大 z-index: 9999，而侧边栏只写了 z-index: 10，结果点击穿透到下层。
排查步骤：
- 用浏览器开发者工具检查侧边栏元素是否被其他元素覆盖（看“Computed”里的
z-index和position） - 确保侧边栏父容器（如
）有position: fixed且z-index≥ 100 - 禁用所有第三方脚本（尤其是广告 SDK），确认是否它们动态插入了遮罩层
- 部分安卓 WebView 对
fixed元素的触摸事件支持差，可临时加touch-action: manipulation提升响应
侧边栏的“浮动”本质是视觉锚定，但它的交互稳定性极度依赖层级、尺寸和移动端适配细节——少一个 z-index 或漏掉一行 calc() 高度，就可能让整个菜单在真机上彻底失灵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
