Firefox中fixed容器内sticky元素异常消失问题求助

核心问题原因 #

Firefox对设置了position: fixed的body元素配合负top值的渲染逻辑特殊，会导致原本基于视口定位的固定侧边栏失去正确的定位参考，从而出现消失的情况。

可行修复方案 #

方案1：用overflow: hidden替代position: fixed锁滚动 #

这是最简洁的方案，完全避开body定位修改带来的问题：

• 打开灯箱时，给body和html同时设置overflow: hidden，直接阻止页面滚动，无需调整top值或元素定位
• 关闭灯箱时移除该样式，恢复正常滚动
• 适配iOS：可额外添加touch-action: none来避免移动端的滚动回弹问题

代码示例：

// 打开灯箱
function openLightbox() {
  document.body.style.overflow = 'hidden';
  document.documentElement.style.overflow = 'hidden';
  document.body.style.touchAction = 'none';
}

// 关闭灯箱
function closeLightbox() {
  document.body.style.overflow = '';
  document.documentElement.style.overflow = '';
  document.body.style.touchAction = '';
}

方案2：保持position: fixed但同步侧边栏偏移 #

如果必须通过position: fixed锁滚动，可同步修正侧边栏的定位：

• 记录当前滚动距离scrollY，给body设置position: fixed和top: -${scrollY}px
• 同时给侧边栏设置top: ${scrollY}px，抵消body偏移带来的视口位移
• 关闭灯箱时，移除body和侧边栏的定位样式，恢复滚动并跳回原位置

代码示例：

let savedScrollY;

function openLightbox() {
  savedScrollY = window.scrollY;
  document.body.style.position = 'fixed';
  document.body.style.top = `-${savedScrollY}px`;
  document.querySelector('.sidebar').style.top = `${savedScrollY}px`;
}

function closeLightbox() {
  document.body.style.position = '';
  document.body.style.top = '';
  document.querySelector('.sidebar').style.top = '';
  window.scrollTo(0, savedScrollY);
}

方案3：用transform平移内容容器替代body定位 #

通过平移页面内容容器来保持当前位置，不修改body的定位上下文：

• 给页面所有内容（除灯箱和侧边栏）套一个content-wrapper容器
• 打开灯箱时，记录滚动距离，给body设置overflow: hidden，给容器设置transform: translateY(-${scrollY}px)
• 关闭灯箱时移除样式，恢复滚动并定位到原位置

代码示例：

<body>
  <div class="content-wrapper">
    <!-- 页面主体内容 -->
  </div>
  <aside class="sidebar">侧边菜单</aside>
  <div class="lightbox">灯箱内容</div>
</body>

let savedScrollY;

function openLightbox() {
  savedScrollY = window.scrollY;
  document.body.style.overflow = 'hidden';
  document.querySelector('.content-wrapper').style.transform = `translateY(-${savedScrollY}px)`;
}

function closeLightbox() {
  document.body.style.overflow = '';
  document.querySelector('.content-wrapper').style.transform = '';
  window.scrollTo(0, savedScrollY);
}

内容的提问来源于stack exchange，提问作者user21946132