页面两个背景区块JS视差效果异常：第4区块图片消失

嘿，我碰到过类似的坑！同一个视差函数在第一个区块正常工作，到第四个就背景图直接消失了，这种情况大概率是偏移计算或者CSS基础设置的问题。我来给你拆解下可能的原因，以及对应的修复方案：

最可能的原因：全局滚动偏移量太大，把背景图“推”出了区块 #

你的当前代码是用全局滚动距离来计算所有.parallax区块的背景偏移：

$(window).scroll(function() { parallax(); }) 
function parallax() { 
  var wScroll = $(window).scrollTop(); 
  $('.parallax').css('background-position','center '+(wScroll*0.75)+'px') 
}

当页面滚动到第四个区块时，wScroll已经是一个很大的数值，乘以0.75后，背景图的Y轴偏移量会夸张到直接移出区块的可视范围——就像把图片往下拉得太远，区块里完全看不到了。

修复方案：针对每个区块单独计算偏移 #

改成基于每个区块相对于视口的位置来计算偏移，只在区块进入视口后才应用视差，避免全局滚动的累加问题：

$(document).ready(function() {
  $(window).scroll(function() {
    parallax();
  });
  // 页面加载时先执行一次，避免初始位置异常
  parallax();
});

function parallax() {
  var wScroll = $(window).scrollTop();
  var windowHeight = $(window).height();
  
  $('.parallax').each(function() {
    var $section = $(this);
    var sectionTop = $section.offset().top;
    var sectionHeight = $section.height();
    
    // 计算区块进入视口后的滚动距离
    var scrollWithinSection = wScroll - sectionTop + windowHeight;
    
    // 只在区块处于视口范围内时应用视差
    if (scrollWithinSection > 0 && scrollWithinSection < sectionHeight + windowHeight) {
      // 用较小的系数，基于区块内的滚动距离计算偏移
      var parallaxOffset = scrollWithinSection * 0.25;
      $section.css('background-position', 'center ' + parallaxOffset + 'px');
    }
  });
}

其他需要排查的CSS设置问题 #

如果上面的方法没解决，检查下第四个.parallax区块的CSS：

• 有没有设置足够的高度：比如min-height: 500px，如果区块本身高度为0，背景图肯定看不到
• 背景图的适配设置：确保加上background-size: cover和background-repeat: no-repeat，让图片能适配区块大小
• 初始背景位置：所有.parallax区块的初始background-position要统一设为center 0，避免初始偏移就有问题
• 视差必备属性：加上background-attachment: fixed（如果是固定视差的需求），这是很多视差效果的基础

.parallax {
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 0;
  min-height: 500px; /* 根据你的需求调整高度 */
}

快速测试小技巧 #

你可以先临时把代码里的0.75改成0.1，看看第四个区块的图片会不会出现。如果出现了，那百分百是偏移量过大的问题，用上面的“每个区块单独计算偏移”的方法就能完美解决。

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