固定容器滚动与页脚重叠及position:sticky失效问题求助

CSS 方案（适用于页脚高度固定场景） #

如果之前position: sticky未生效，多半是父容器存在overflow: hidden/auto/scroll属性，或者未设置正确的定位阈值。按以下方式调整：

假设页脚类为.footer，高度固定为100px，信息容器类为.info-container：

/* Infos */
.info-container {
  position: sticky;
  top: 20px; /* 滚动时距离顶部的固定间距 */
  bottom: 120px; /* 页脚高度+预留间距（比如20px），确保不与页脚重叠 */
  align-self: flex-start; /* 若容器在flex布局中，需添加此属性让sticky生效 */
}

注意：此方案仅在页脚高度固定时适用，若页脚高度动态变化，优先用JS方案。

JavaScript 方案（灵活适配各种场景） #

通过监听滚动事件，动态计算容器与页脚的位置关系，调整容器定位：

const infoContainer = document.querySelector('.info-container');
const footer = document.querySelector('.footer');
const reserveGap = 20; // 容器与页脚的预留间距

// 计算并调整容器定位的核心函数
function adjustContainerPosition() {
  const containerRect = infoContainer.getBoundingClientRect();
  const footerTop = footer.getBoundingClientRect().top;
  const viewportHeight = window.innerHeight;
  
  // 容器底部到页脚顶部的剩余距离
  const gapToFooter = footerTop - (containerRect.top + containerRect.height);

  if (gapToFooter < reserveGap) {
    // 即将触碰页脚，切换为绝对定位，固定在页脚上方
    infoContainer.style.position = 'absolute';
    infoContainer.style.bottom = `${reserveGap + (viewportHeight - footerTop)}px`;
    infoContainer.style.top = 'auto';
  } else {
    // 正常滚动状态，保持固定定位
    infoContainer.style.position = 'fixed';
    infoContainer.style.top = `${reserveGap}px`;
    infoContainer.style.bottom = 'auto';
  }
}

// 监听滚动和窗口 resize 事件
window.addEventListener('scroll', adjustContainerPosition);
window.addEventListener('resize', adjustContainerPosition);

// 页面加载完成后执行一次初始定位
window.addEventListener('load', adjustContainerPosition);

额外优化：如果页面存在异步加载的动态内容，需在内容加载完成后重新调用adjustContainerPosition()函数。

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