滚动时Div覆盖固定Div的实现方案（无背景图）

需求：

• 滚动时让一个div覆盖固定div，不使用背景图；
• 目标div（.background-beige）底部贴合屏幕底部固定，下方内容向上滚动（类似视差效果）；
• 即使固定div（.contact-banner-wrapper）高度超过屏幕，也能正常生效（position: sticky不适用）。

现有问题：当前代码在滚动到目标位置时，内容会突兀跳过固定div，回滚时也存在该问题。

现有代码：

.background-beige {
  width: 100%;
  background-color: #f8f8f8;
  padding-bottom: 200px !important;
}

.contact-banner-wrapper {
  height: 436px;
  background-color: #c22a40;
  position: relative;
}

$(window).scroll(function (e) {
  var el = $(" .contact-banner-wrapper");
  var elem = $(" .background-beige");
  if (
    $(window).scrollTop() >=
    elem.offset().top  + elem.outerHeight() - window.innerHeight 
  ) {
    elem.css({ position: "fixed", bottom: "0px"});

  }
  if ($(this).scrollTop() < 200) {
    elem.css({ position: "static"});

    console.log("reset");
  }
}); 

核心问题是直接切换position: static和fixed会导致元素脱离/加入文档流，引发布局跳动。可以通过占位元素保留布局空间+动态控制元素位置，或者用transform: translateY()代替定位切换，避免布局重排。

方案一：占位元素+固定定位 #

1. 给.background-beige添加同级占位容器，高度和它一致，用于固定定位时保留原布局空间：

.background-beige {
  width: 100%;
  background-color: #f8f8f8;
  padding-bottom: 200px !important;
  position: absolute;
  left: 0;
}

.background-beige-placeholder {
  height: calc(100% + 200px); /* 匹配目标div的总高度（含padding） */
  display: none;
}

.contact-banner-wrapper {
  height: 436px;
  background-color: #c22a40;
  position: relative;
}

2. 修改JS逻辑，精确计算触发阈值，同步控制目标div和占位容器：

$(function() {
  var $beige = $(".background-beige");
  var $placeholder = $(".background-beige-placeholder");
  
  // 初始化计算触发阈值
  var beigeOffsetTop = $beige.offset().top;
  var beigeOuterHeight = $beige.outerHeight();
  var triggerThreshold = beigeOffsetTop + beigeOuterHeight - window.innerHeight;
  
  $(window).scroll(function() {
    var scrollTop = $(this).scrollTop();
    
    if (scrollTop >= triggerThreshold) {
      // 固定目标div在屏幕底部
      $beige.css({
        position: "fixed",
        bottom: "0",
        top: "auto"
      });
      // 显示占位容器，避免布局塌陷
      $placeholder.show();
    } else {
      // 恢复目标div原位置
      $beige.css({
        position: "absolute",
        top: beigeOffsetTop,
        bottom: "auto"
      });
      $placeholder.hide();
    }
  });
  
  // 窗口大小变化时重新计算阈值
  $(window).resize(function() {
    beigeOffsetTop = $beige.offset().top;
    beigeOuterHeight = $beige.outerHeight();
    triggerThreshold = beigeOffsetTop + beigeOuterHeight - window.innerHeight;
  });
});

3. 调整HTML结构：

<div class="contact-banner-wrapper">
  <div class="background-beige-placeholder"></div>
  <div class="background-beige">
    <!-- 目标div内容 -->
  </div>
</div>

方案二：用transform实现无跳动视差 #

不想用占位元素的话，可通过transform: translateY()控制位置，该方式不触发布局重排，彻底避免跳动：

.background-beige {
  width: 100%;
  background-color: #f8f8f8;
  padding-bottom: 200px !important;
  position: relative;
  z-index: 1;
}

.contact-banner-wrapper {
  height: 436px;
  background-color: #c22a40;
  position: relative;
}

$(function() {
  var $beige = $(".background-beige");
  var beigeOffsetTop = $beige.offset().top;
  var beigeOuterHeight = $beige.outerHeight();
  // 计算最大移动距离（直到目标div底部贴屏）
  var maxTranslate = beigeOuterHeight - window.innerHeight;
  
  $(window).scroll(function() {
    var scrollTop = $(this).scrollTop();
    var currentTranslate = scrollTop - beigeOffsetTop;
    
    if (currentTranslate >= 0 && currentTranslate <= maxTranslate) {
      // 随滚动向上移动目标div
      $beige.css("transform", `translateY(-${currentTranslate}px)`);
    } else if (currentTranslate > maxTranslate) {
      // 固定目标div在底部
      $beige.css("transform", `translateY(-${maxTranslate}px)`);
    } else {
      // 恢复目标div原位
      $beige.css("transform", "translateY(0)");
    }
  });
  
  // 窗口大小变化时重新计算参数
  $(window).resize(function() {
    beigeOffsetTop = $beige.offset().top;
    beigeOuterHeight = $beige.outerHeight();
    maxTranslate = beigeOuterHeight - window.innerHeight;
  });
});

关键优化点 #

• 避免直接切换position属性，改用占位容器或transform维持布局稳定性；
• 增加窗口resize监听，确保滚动阈值在窗口尺寸变化时自动更新；
• 精确计算触发固定的阈值，避免提前或延迟触发导致的跳动。

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