如何实现div间视差效果？解决fixed定位重复显示问题

嘿，我明白你遇到的麻烦了——想让滚动面板盖在固定面板上面，结果用了position:fixed后不仅层级不对，滚动时还出现固定面板“重复”的情况，同时还要实现视差效果对吧？咱们来一步步搞定它：

问题根源分析 #

当你给#a加position:fixed后，它会脱离正常的文档流，原来占据的位置会被后面的#b填补，所以滚动时#b会滑到#a下方；再加上你要让#b在#a上方的需求没理顺层级关系，就出现了看起来#a重复的错觉。

解决方案步骤 #

1. 调整面板层级，让滚动面板盖在固定面板上方

给固定面板设置较低的z-index，滚动面板设置更高的z-index，这样就能实现你要的“#b在#a上方、#d在#c上方”的显示效果：

#a, #c {
  z-index: 1; /* 固定面板层级低 */
}
#b, #d {
  z-index: 2; /* 滚动面板层级高，显示在上面 */
}

2. 修复fixed元素导致的布局偏移（解决“重复显示”问题）

因为fixed元素脱离文档流，后面的元素会自动填补它原来的位置，导致初始时#b和#a重叠，滚动时就会看起来#a重复了。解决方法是给body添加和固定面板高度一致的padding-top，让后面的元素从固定面板下方开始布局：

body {
  margin: 0;
  padding-top: 100vh; /* 这里假设你的面板是全屏高度，若为固定高度就写具体数值，比如500px */
}

#a {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* 和padding-top对应 */
}

3. 实现视差效果

可以通过JavaScript监听滚动事件，动态调整滚动面板的位置，让它们的滚动速度慢于页面滚动，产生视差感：

window.addEventListener('scroll', () => {
  const scrollOffset = window.scrollY;
  // 调整0.5这个系数可以改变视差强度，数值越小视差越明显
  document.getElementById('b').style.transform = `translateY(calc(-${scrollOffset * 0.5}px))`;
  document.getElementById('d').style.transform = `translateY(calc(-${scrollOffset * 0.5}px))`;
});

完整代码示例 #

<div id="a" class="panels">FIXED PANEL</div>
<div id="b" class="panels">Scrolling-Panel 1</div>
<div id="c" class="panels">Scrolling-Panel 2</div>
<div id="d" class="panels">Scrolling-Panel 3</div>

<style>
body {
  margin: 0;
  padding-top: 100vh;
}

.panels {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
}

#a {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  background: #f0f0f0;
}

#b {
  z-index: 2;
  background: #ffcccc;
  transition: transform 0.3s ease; /* 让视差移动更平滑 */
}

#c {
  z-index: 1;
  background: #ccffcc;
}

#d {
  z-index: 2;
  background: #ccccff;
  transition: transform 0.3s ease;
}
</style>

<script>
window.addEventListener('scroll', () => {
  const scrollOffset = window.scrollY;
  document.getElementById('b').style.transform = `translateY(calc(-${scrollOffset * 0.5}px))`;
  document.getElementById('d').style.transform = `translateY(calc(-${scrollOffset * 0.5}px))`;
});
</script>

这样调整后，既能让滚动面板显示在固定面板上方，又不会出现滚动时固定面板重复的问题，还能实现平滑的视差效果。

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