滚动叠加全屏Div时如何为每个Div设置不同背景图并保留叠加效果

问题根源 #

你当前的实现混用了独立背景元素（.bg/.bg2）和panel自身背景，导致z-index层级混乱，滚动时的叠加逻辑被打破。另外，panel-fixed的样式只处理了内部文本，没顾及背景的层级控制。

修复方案 #

1. 简化HTML结构 #

移除独立的.bg/.bg2元素，把背景直接绑定到对应的panel：

<script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
<body>
  <div class="panel panel-one">
    <div class="panel-inner">
      <h1>Lorem ipsum dolor sit amet</h1>
      <p>
        Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui
        hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient
        montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros
        vulputate purus aliquam vel blandit ligula pharetra.
      </p>
    </div>
  </div>

  <div class="panel panel-two">
    <div class="panel-inner">
      <h2>Lorem ipsum dolor sit amet</h2>
      <p>
        Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui
        hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient
        montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros
        vulputate purus aliquam vel blandit ligula pharetra.
      </p>
    </div>
  </div>

  <div class="panel panel-three">
    <div class="panel-inner">
      <h3>Lorem ipsum dolor sit amet</h3>
      <p>
        Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui
        hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient
        montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros
        vulputate purus aliquam vel blandit ligula pharetra.
      </p>
    </div>
  </div>
</body>

2. 调整CSS逻辑 #

让每个panel自带固定背景，通过panel-fixed类控制背景和内容的层级：

html,
body {
  margin: 0;
  height: 100%;
}

/* 基础panel样式：每个panel自带全屏固定背景 */
.panel {
  position: relative;
  min-height: 100vh;
  z-index: 5;
  background-size: cover;
  background-attachment: fixed;
  animation: zoom 10s forwards;
}

/* 非当前panel：降低整体z-index，让背景被上层panel叠加 */
.panel-fixed {
  z-index: 1;
}

.panel-inner {
  padding: 1em;
  width: 100%;
  position: relative;
  z-index: 2; /* 确保文本始终在背景之上 */
}

/* 各panel自定义背景 */
.panel-one {
  background-image: url("https://unsplash.it/800?random");
}
.panel-two {
  background-image: url("https://molinocafe.com/modules/tm_imageslider/views/img/afd1e4768091d851c956b7c65f38870aa973d6cc_main.png");
}
.panel-three {
  background-color: green;
}

/* 基础样式重置 */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* 背景缩放动画 */
@keyframes zoom {
  from { background-size: 100%; }
  to { background-size: 110%; }
}

3. 保留原有JS逻辑（无需修改） #

var _window = $(window),
    panels = $('.panel'),
    panelsY = [];

// 缓存每个panel的初始位置
$.each(panels, function(i, el) {
    panelsY.push(panels.eq(i).offset().top);
});

// 绑定滚动事件
_window.bind('scroll', function() {
    updateWindow();
});

function updateWindow() {
    var y = _window.scrollTop();

    // 判断当前滚动位置对应的panel
    for (i = 0, l = panels.length; i < l; i++) {
        if ((i === l - 1) || (y >= panelsY[i] && y <= panelsY[i+1])) {
            break;
        }
    };

    // 更新panel的固定类
    panels.not(':eq(' + i + ')').removeClass('panel-fixed');
    panels.eq(i).addClass('panel-fixed');
};

关键修改说明 #

• 把独立背景元素整合到panel中，避免层级冲突
• 给panel-inner设置相对z-index，确保文本始终显示在背景之上
• 保留panel-fixed的z-index控制逻辑，滚动时非当前panel的背景自动处于下层，实现叠加效果
• 统一背景动画和固定属性，确保所有panel的背景行为一致

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