实现首次滚动图片右下移动、二次滚动右上移动，需兼容Webflow

要实现首次滚动图片右向下、二次滚动右向上的效果，你当前的代码是通过缩放背景图实现的，这和位移需求不符。下面是兼容Webflow的实现方案，通过背景位置控制或元素位移来达成效果：

实现思路 #

1. 划分滚动阶段：基于两个.scroll-section的高度，确定第一次滚动（第一个区块）和第二次滚动（第二个区块）的区间
2. 计算位移比例：在每个区间内分别计算X（左右）和Y（上下）方向的位移值
3. 应用位移：通过background-position（背景图）或transform: translate()（独立图片元素）实现移动

完整代码（背景图位移版本） #

// 计算每个滚动区块的高度及累计高度
const sections = $(".scroll-section");
const sectionHeights = [];
let totalHeight = 0;

sections.each(function() {
  const height = $(this).height();
  sectionHeights.push(height);
  totalHeight += height;
});

// 滚动事件处理
$(".site-content").scroll(function() {
  const scrollTop = $(this).scrollTop();
  let xPos = 0;
  let yPos = 0;

  // 第一阶段：滚动第一个区块时，图片右向下移动
  if (scrollTop <= sectionHeights[0]) {
    const progress = scrollTop / sectionHeights[0];
    xPos = progress * 50; // X轴从0%移动到50%
    yPos = progress * 50; // Y轴从0%移动到50%
  } 
  // 第二阶段：滚动第二个区块时，图片右向上移动
  else if (scrollTop <= totalHeight) {
    const progress = (scrollTop - sectionHeights[0]) / sectionHeights[1];
    xPos = 50 + progress * 50; // X轴从50%移动到100%
    yPos = 50 - progress * 50; // Y轴从50%移动回0%
  }

  // 应用位移到背景图
  $(".page-fixed").css("background-position", `${xPos}% ${yPos}%`);
});

独立图片元素版本（如果你用的是<img>标签而非背景图） #

如果.page-fixed是独立的图片元素，替换上述代码的最后一行：

$(".page-fixed").css("transform", `translate(${xPos}%, ${yPos}%)`);

Webflow配置注意事项 #

• 确保.site-content是设置了overflow: auto的滚动容器（Webflow里可在元素样式的溢出选项设置）
• .page-fixed元素需设置固定定位或绝对定位（根据布局需求），如果是背景图，要开启background-size: cover或合适的尺寸
• 代码需放在Webflow的项目设置 > 自定义代码 > 页脚代码中，或对应页面的自定义代码区域

为什么之前的margin方案没生效？ #

margin属性会影响元素的布局流，当滚动容器滚动时，直接修改margin会触发重排，且难以精准控制分阶段的位移比例。使用background-position或transform性能更优，也更容易实现分阶段的位移逻辑。

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