侧边栏用 position: fixed 还是 position: sticky？
先给个核心结论：绝大多数情况下，你应该毫不犹豫地选择 position: fixed。为什么？因为它能真正脱离文档流，像磁铁一样牢牢吸附在浏览器视口的边缘，无论页面怎么滚动，它都稳如磐石。反观 position: sticky，看似简单易用，实则暗藏玄机——它高度依赖父容器的高度和滚动上下文。稍不留神，比如父元素忘了设置具体高度，或者被一个 overflow: hidden 给截断，这个“粘性”效果就会立刻失效，让你的侧边栏瞬间“掉”下来。
那么，用 fixed 实操时要注意什么？
- 首先，定位必须明确。你得手动设置
top和left（或right）值。别忘了，如果页面顶部有导航栏，top值就得是导航栏的高度，比如top: 64px。 - 其次，要给正文“让位”。为了避免侧边栏遮挡住主要内容，正文区域需要加上等宽的
margin-left（左侧栏）或margin-right（右侧栏）。 - 最后，移动端是另一个战场。在窄屏上，一个固定的侧边栏会严重挤占空间。这时候，通常需要用媒体查询将
fixed改为static，或者干脆把它隐藏起来，通过一个汉堡菜单按钮来控制显示和隐藏。
浮动菜单点击后如何高亮当前项？
这可能是新手最容易踩坑的地方。纯 CSS 无法监听点击事件，更无法在页面刷新后记住哪个是“当前页”。所以，这事儿离不开 Ja vaScript 来绑定事件和操作 CSS 类。
常见的错误做法是什么？要么只在 onclick 里改内联样式，一刷新就恢复原样；要么就是忘了在给新项添加高亮类之前，清除掉上一项的激活状态。
正确的实现路径应该是这样的：
立即学习“前端免费学习笔记（深入）”；
- 做好标记：给每个菜单项（通常是
标签）加上一个唯一的标识，比如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)，这里的 64px 就是顶部导航栏的高度，然后再加上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() 高度计算，都可能导致整个菜单在真机环境下彻底失灵。这才是关键所在。
