jQuery新手求助：滚动距顶部250px时背景图从100%动画到50%

嘿，作为jQuery新手能自己动手尝试整合代码真的超棒！我来帮你把这个滚动触发背景缩放的效果完善好，咱们一步步来：

第一步：修正并完善CSS样式 #

你原来的CSS里重复写了height属性，而且缺少关键的过渡动画设置，先把这部分调整好：

#page {
  height: 100vh; /* 用100vh就足够占满视口高度，不需要重复写height:100% */
  background-image: url("image.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%; /* 默认初始大小为100% */
  transition: background-size 0.5s ease; /* 添加过渡动画，让缩放更平滑 */
}

/* 定义滚动后要切换的类 */
#page.bg-scaled {
  background-size: 50%;
}

第二步：编写jQuery逻辑实现滚动监听 #

接下来写核心的滚动监听代码，判断页面滚动距离，触发背景缩放：

$(document).ready(function() {
  // 监听页面滚动事件
  $(window).scroll(function() {
    // 获取当前滚动距离顶部的像素值
    var scrollDistance = $(window).scrollTop();
    
    // 判断是否滚动到了250px的位置
    if (scrollDistance >= 250) {
      // 添加类来触发背景缩放
      $('#page').addClass('bg-scaled');
    } else {
      // 滚动回去的时候恢复原大小
      $('#page').removeClass('bg-scaled');
    }
  });
  
  // 页面加载时先触发一次滚动判断，避免初始状态不对
  $(window).trigger('scroll');
});

额外小提示 #

• 为什么用CSS类而不是直接修改样式？因为配合CSS的transition属性，动画效果会更流畅，而且代码更易维护。
• 如果你希望动画是单向的（比如滚动到250px后只缩放一次，不恢复），直接把else部分的代码删掉就行。
• 要是你一定要用jQuery的animate方法（虽然不推荐，因为background-size不是标准数值属性），可以试试下面的替代方案，但效果不如CSS过渡流畅：

$(document).ready(function() {
  $(window).scroll(function() {
    var scrollDistance = $(window).scrollTop();
    if (scrollDistance >= 250) {
      $('#page').animate({
        backgroundSize: '50%'
      }, 500);
    } else {
      $('#page').animate({
        backgroundSize: '100%'
      }, 500);
    }
  });
  $(window).trigger('scroll');
});

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