滚动时按比例平移元素：如何实现红区前白框均匀右移50%并解决快速滚动问题

• 核心目标：页面向下滚动时，白色方块同步向右平移，直到滚动位置抵达红色区块的边界时，方块刚好累计完成向右平移自身宽度的50%，整个位移过程和滚动进度保持均匀对应
• 示例参数：本场景下白色方块起始位置与红色区块的垂直间距为1000px
• 现存问题：
  • 之前为了放缓移动速度，随意取了除数10做位移计算，始终无法做到滚动进度和方块位移的精准匹配，没法在抵达红色区块时刚好完成50%的右移
  • 页面滚动速度过快时，方块的实际累计位移会小于预期值

现有实现代码 #

JS 逻辑 #

var xPos = 0;

function getXPos(target, windowPos) {
  var amount = windowPos - target;
  xPos = amount / 10;
  return xPos;
}

$(window).scroll(function() {
  var windowPos = $(window).scrollTop();
  var sectionOne = $('section.one').offset().top;
  var sectionTwo = $('section.two').offset().top;
  var box = $('.box');

  if (windowPos > sectionOne && windowPos < sectionTwo) {
    box.css({
      "transform": 'translateX(' + getXPos(sectionOne, windowPos) + '%)'
    });
  }
});

CSS 样式 #

body {
  margin: 0;
}

.box {
  background: white;
  position: sticky;
  top: 0;
  width: 300px;
  height: 300px;
}

section.one {
  height: 1000px;
  background: blue;
}

section.two {
  height: 1000px;
  background: red;
}

HTML 结构 #

<section class="one">
  <div class="box"></div>
</section>
<section class="two"></section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

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