滚动区域固定是指在页面滚动时，使局部容器（如侧边栏、顶部导航）保持位置不动，而非整页禁滚；核心是区分position: fixed（锚定视口）与position: sticky（锚定滚动容器）的适用场景，后者需设置top等阈值且依赖有overflow的父容器。

滚动区域固定是指什么？

它不是让整个页面不滚动，而是让某个局部容器（比如侧边栏、顶部导航）在用户滚动页面时保持位置不动。关键在于区分 position: fixed 和容器内滚动（overflow: auto）的组合使用场景——很多人误以为加个 fixed 就能“固定滚动区”，结果发现内容被截断或定位错乱。

用 position: fixed 固定容器本身

这是最直接的方式，适用于脱离文档流、相对视口定位的元素。常见于左侧菜单、右下角悬浮按钮：

• top / right / bottom / left 必须显式设置，否则 fixed 元素会坍缩到左上角
• 如果父容器有 transform、perspective 或 filter，会创建新的定位上下文，导致 fixed 失效（降级为 absolute）
• 移动端需注意：iOS Safari 在地址栏收起/展开时会触发视口高度变化，fixed 元素可能跳动；可加 viewport meta 控制：<meta name="viewport" content="height=device-height">

<div style="position: fixed; top: 20px; right: 20px; width: 300px; max-height: 400px; overflow-y: auto;">
  <p>这里内容很多…</p>
</div>

在可滚动容器内实现“内部固定”

当需要固定的是某块区域（如表格表头、聊天窗口顶部标题），而容器本身是 overflow: auto 的，position: sticky 是唯一可靠选择：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• sticky 依赖最近的滚动祖先（即设置了 overflow 且非 visible 的父容器），若祖先没设 overflow，它就退化为 relative
• 必须配合 top（或 bottom）值才生效，例如 top: 0 表示滚动到该元素顶部与视口对齐时开始吸附
• 不要和 transform 同时用在同一个元素上，Safari 旧版本会失效

<div style="height: 300px; overflow-y: auto;">
  <header style="position: sticky; top: 0; background: white; z-index: 1;">标题行</header>
  <div>滚动内容…</div>
</div>

为什么 position: absolute 不适合做滚动固定？

它常被误用：设了 absolute + top: 0，但没考虑滚动容器的定位上下文。问题包括：

立即学习“前端免费学习笔记（深入）”；

• 若父容器没设 position: relative，absolute 会相对于 body 定位，随页面滚动一起动
• 即使父容器有 relative，一旦容器自己滚动，absolute 元素不会跟随滚动条“粘住”，只是静止在初始偏移位置
• 无法响应滚动边界（比如只在容器内吸附），行为不可控

真正需要“随容器滚动但局部固定”的，只有 sticky 能满足；要脱离容器、锚定视口，就用 fixed。混用或强行用 absolute 模拟，最终都会在不同浏览器或滚动深度下暴露定位漂移问题。