如何实现页面滚动时带视差效果的Lottie交互动画

我参考Lottie官方指南成功实现了基础的Lottie交互动画，现在遇到了问题：我使用的动画时长较长，需要添加视差滚动效果，理想状态下动画的开始和结束与滚动进度完全对应。
我尝试了多种CSS解决方案，尤其是使用position: fixed搭配自定义高度的方案，但应用这些属性后动画停止运行。

使用fixed定位的示例代码（无动画效果） #

<body style="height: 1000px;">

    <div id="MyContainerId" style="position: fixed;">
        <lottie-player id="firstLottie" src="https://assets2.lottiefiles.com/packages/lf20_ug2jsixg.json" background="transparent" speed="1" style="width: 100%; height: 100vh;"></lottie-player>
    </div>


    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
    <script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
    <script>
        LottieInteractivity.create({
            mode: 'scroll',
            player: '#firstLottie',
            container: '#MyContainerId',
            actions: [{
                visibility: [0, 1],
                type: 'seek',
                frames: [0, 100],
            }, ],
        });
    </script>
</body>

使用sticky定位的示例代码（动画可运行但元素从屏幕隐藏） #

<body style="height: 1000px;">

    <div id="MyContainerId" style="position: sticky;">
        <lottie-player id="firstLottie" src="https://assets2.lottiefiles.com/packages/lf20_ug2jsixg.json" background="transparent" speed="1" style="width: 100%; height: 100vh;"></lottie-player>
    </div>


    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
    <script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
    <script>
        LottieInteractivity.create({
            mode: 'scroll',
            player: '#firstLottie',
            container: '#MyContainerId',
            actions: [{
                visibility: [0, 1],
                type: 'seek',
                frames: [0, 100],
            }, ],
        });
    </script>
</body>

我猜测是CSS属性组合使用不当导致的问题，请问该如何修复这个问题？

问题根因 #

1. position: fixed的容器会脱离正常文档流，Lottie Interactivity的滚动监听逻辑是基于容器在文档流中的位置偏移计算可见性的，fixed容器没有滚动偏移量，无法检测到滚动进度，因此动画不会触发。
2. position: sticky的元素生效需要两个条件：一是设置top/bottom等偏移属性，二是父容器有大于元素本身的高度，预留足够的滚动停留空间。你的写法既没有设置偏移属性，也没有单独的占位容器提供滚动高度，因此元素会直接随页面滚出视口。

修复后的实现代码 #

<body style="height: 100%; margin: 0; padding: 0;">
  <!-- 外层占位容器，提供滚动高度，作为进度计算基准 -->
  <div id="ScrollWrapper" style="height: 1000px;">
    <!-- 内层sticky容器，固定在视口顶部显示动画 -->
    <div id="MyContainerId" style="position: sticky; top: 0; width: 100%; height: 100vh;">
      <lottie-player 
        id="firstLottie" 
        src="https://assets2.lottiefiles.com/packages/lf20_ug2jsixg.json" 
        background="transparent" 
        speed="1" 
        style="width: 100%; height: 100%;"
      ></lottie-player>
    </div>
  </div>

  <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
  <script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
  <script>
    LottieInteractivity.create({
      mode: 'scroll',
      player: '#firstLottie',
      // 绑定外层占位容器计算滚动进度
      container: '#ScrollWrapper',
      actions: [{
        visibility: [0, 1],
        type: 'seek',
        frames: [0, 100],
      }],
    });
  </script>
</body>

核心修改点 #

• 新增高度为1000px的#ScrollWrapper外层占位容器，处于正常文档流中，滚动时的位置偏移可以被Lottie Interactivity正确识别，作为动画进度的计算基准。
• 内层#MyContainerId添加position: sticky + top: 0配置，滚动到对应位置时会固定在视口顶部，直到外层占位容器完全滚出视口。
• Lottie配置中的container参数绑定外层占位容器，基于它的可见性范围匹配动画帧区间，实现滚动进度和动画播放进度完全同步。

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