fixed元素滚动时错位或消失，根本原因是父容器触发了新包含块（如含transform、filter等属性），使其脱离视口定位；iOS Safari需加-webkit-transform: translateZ(0)修复；position: sticky是更优替代方案。
fixed 定位元素为什么在滚动时“消失”或错位
常见现象是：position: fixed 元素本该贴着视口边缘，但页面一滚动就偏移、被遮挡，甚至完全看不见。根本原因不是 CSS 写错了，而是它被套在了有 transform、perspective、filter 或 will-change 的父容器里——这些属性会触发新的层叠上下文（stacking context）和**包含块（containing block）变更**，导致 fixed 不再相对于视口定位，而是相对于这个新包含块。
- 检查父级元素是否写了
transform: translateZ(0)、filter: blur(1px)或will-change: transform - Chrome DevTools 的 Elements 面板中，hover 到该
fixed元素，看 Computed → Position → Containing Block 是否显示为“Viewport”；如果不是，说明被截断了 - 临时移除父级的
transform类或内联样式，确认是否恢复——这是最快速的验证方式
滚动时让 fixed 元素“跟随”内容区域出现/隐藏
纯 CSS 无法监听 scroll 事件，所以这类行为必须靠 JavaScript 配合 getBoundingClientRect() 或 IntersectionObserver 实现。典型场景：侧边导航栏只在主内容区进入视口时才显示为 fixed。
- 用
IntersectionObserver监听目标区域（如<main>）是否进入视口，回调中切换fixed元素的visibility或pointer-events - 避免直接改
display: none，否则会破坏布局流；推荐用visibility: hidden; pointer-events: none - 如果需要平滑过渡，给
fixed元素加transition: opacity 0.2s, transform 0.2s，再通过 class 控制opacity和transform: translateY(-10px)
const observer = new IntersectionObserver(
([entry]) => {
document.body.classList.toggle('main-in-view', entry.isIntersecting);
},
{ threshold: 0.1 }
);
observer.observe(document.querySelector('main'));
fixed 元素被 iOS Safari 滚动“吞掉”的修复
iOS Safari 对 position: fixed 的实现有历史遗留问题：当页面存在 overflow: scroll 的容器、或用户快速滚动时，fixed 元素可能闪退、卡顿、甚至整个不渲染。这不是 bug，而是 WebKit 的滚动优化策略导致的渲染延迟。
- 给
fixed元素加-webkit-transform: translateZ(0)强制启用 GPU 加速（注意：仅对 fixed 元素本身加，不要加在父级） - 确保该元素没有设置
backface-visibility: hidden或opacity < 1，这两者会干扰 iOS 的 fixed 渲染管线 - 如果它位于
<body>外部（比如插入到<html>下），iOS 可能不识别其固定行为；务必保留在<body>内
替代 fixed 的现代方案：position: sticky
如果你要的效果其实是“滚动到某位置后才固定”，position: sticky 是更轻量、更语义化、且无需 JS 的选择。但它不是 fixed 的全功能替代——它依赖于**最近的滚动祖先容器**，且只在指定阈值内生效。
立即学习“前端免费学习笔记（深入）”；
- 必须设置
top、bottom、left或right值才有意义，例如top: 0 - 父容器不能有
overflow: hidden或overflow: clip，否则 sticky 会被截断 - 在 flex 或 grid 容器中使用时，需确认父项未设
align-items: stretch等影响高度的属性，否则 sticky 可能失效
.sticky-header {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 100;
}
滚动行为的边界情况很多，尤其是涉及多层嵌套滚动、iOS 兼容、以及第三方库（如 Swiper、React Router 的 scroll restoration）时，fixed 元素的位置很容易失控。真正关键的不是写对那行 CSS，而是先确认它的包含块是谁、谁在裁剪它、谁在重排它。 
