Javascript 跳跃元素

我正在创建一个视差效果，我已经做到了（几乎）每个元素都有不同的滚动速度。
我还做到了这样，页面下方的元素在到达视口之前不会触发其滚动速度

以下是显示上触发命令的JS：

function isElementInViewport (el) {

  if (typeof jQuery === "function" && el instanceof jQuery) {
    el = el[0];
  }

  var rect = el.getBoundingClientRect();

  return (
    rect.bottom >= 0 &&
    rect.left >= 0 &&
    rect.top <= (window.innerHeight || document.documentElement.clientHeight) && 
    rect.right <= (window.innerWidth || document.documentElement.clientWidth) 
  );
}

或对于已位于页面顶部的元素：

$(window).scroll(function(){
  var wScroll = $(this).scrollTop();

  $('#shape-2').css({
    'transform' : 'translate(0px, -'+ wScroll /8 +'%)'
  });

这里的问题是，当我将函数

iselementviewport

添加到滚动速度时。
它会使元素在显示时跳出视图，然后按我的要求滚动。
因此，它与页面的布局不协调

我试着通过改变元素的位置来补偿它，这样当它显示出来时，它会跳到原来的位置，然后开始滚动，但这并没有被证明是有用的，因为位置因屏幕大小和分辨率的不同而不同

---

我能不能让它在显示时不会跳转？

确保你的基本CSS声明的转换为零，或者在元素出现之前从脚本中添加它；稍后添加属性可能会导致跳转

您是否尝试过类似于

if（$（document）.scrollTop（）>$（'#computer'）.offset（）.top-$（'#computer'）.height（）{

？我尝试过将此代码替换为'if（iselementviewport）'行。结果无效。我忘记了一个括号。

if（$（document.scrollTop（）>$（'#computer'）.offset（）.top-$）.top-$（'#computer'）.offset（）.top-$（''iselementviewport'）.height（））{

这次代码运行正常，但仍然存在跳转问题。我刚刚确定了这一点。在主CSS中，我加入了“transform:translate（0px，0px）；”。仍然不起作用。

$(window).scroll(function(){
  var wScroll = $(this).scrollTop();

  $('#shape-2').css({
    'transform' : 'translate(0px, -'+ wScroll /8 +'%)'
  });