Javascript 视差-偏移元素，绑定到滚动

我脑袋砰砰直响，试图找出添加简单视差行为的正确逻辑

我希望在一个页面上有许多元素，它们的顶部偏移一定距离（例如300px）。然后，当您向下滚动页面时，一旦显示元素的顶部，它将缓慢地向上移动（绑定到滚动），直到元素顶部到达视口的中间，此时它的顶部偏移量为0，并保持在原位

我尝试使用第三方脚本（Scroll Magic、Stellar等），但当我现在无法获得它时，我正在尝试自定义代码：

var$Window=$（Window）；
风险价值抵销额=400；
var window_height=$window.height（）；
var窗口半=（窗口高度/2）；
var sections=$（'SECTION.reveal'）；
节。每个（函数（）{
var元素=$（此）；
//确保我们总是从正确的偏移开始
css（{top:offset\u amount}）；
$Window.bind（'scroll'，function（）{
var viewport_top=$Window.scrollTop（）；
var viewport\u middle=viewport\u top+（窗口高度/2）
var viewport\u bottom=viewport\u top+窗口高度；
var element_top=element.offset（）.top；
如果（元素顶部>视口顶部&元素顶部=0）{
css（{top:（offset_amount*amount_to_middle）+'px'}）；
}否则{
//？锁定到末端位置？
}
}
});
});

不要针对

部分

元素，（创建并）针对其第一个子元素，
否则，您将创建一个并发混乱，试图获得最高位置，但同时修改它

此外，您不能依赖固定的300px边距（即：如果窗口高度小于500px，您已经缺少100px）。当屏幕高度非常小时，该空间可能会有所不同，因此您还需要找到

idealMarg

值

var$win=$（窗口），
$rev=$（“.reveal”），
winH2=0，
winSt=0；
函数揭示（）{
winSt=$win.scrollTop（）；
winH2=$win.height（）/2；
每个$rev.功能（i、el）{
变量y=el.getBoundingClientRect（）.top，
toMiddleMax=Math.max（0，y-winH2），
idealMarg=数学最小值（300，最大值），
margMin=Math.min（idealMarg，idealMarg*（toMiddleMax/winH2））；
$（“>div”，this）.css（{transform:“translateY”（+margMin+“px）”）；
});
}
$win.on（{“加载调整大小滚动”：显示}）；

*{框大小：边框框；-webkit框大小：边框框；}
html，正文{高度：100%；边距：0；}
分区>分区{
填充：40px；
最小高度：100vh；
}

1.
2.
3.
4.

我在HTML中只使用了一个

逻辑上，它必须是

部分的唯一第一个子项。

欢迎您调整上述代码，使其更具性能
 嘿，这是我在awnser的约会


其jist如下所示

JS

var $Window = $(window),
    parallaxFactor = 2;

$('.parallaxblock').each(function(a,b){
    var element = $(b);
    element.css("top",element.data("pOffset") + "px");

    $Window.bind('scroll', function() {
        var pos = 
            // Base Offset
            element.data("pOffset")
            // parallaxFactor
            - ($Window.scrollTop() / parallaxFactor);

        pos = pos < 0 ? 0 : pos;

        element.animate({"top": pos + "px"},10);

        return;
    });

});

示例用法

<div class="parallaxblock" data-p-offset=100>Im A Block</div>
<div class="parallaxblock" data-p-offset=200>Im Also Block</div>
<div class="parallaxblock" data-p-offset=1500>Im Another Block</div>

我是一个街区
Im也会阻塞
我在另一个街区

因此，通过检查offest，我们可以在它到达时将其锁定在屏幕顶部

我得到div上数据标记的偏移量

如果你想改变不同位置的滚动速度，你可以在屏幕高度的某个百分比上改变视差系数

希望这能有所帮助。
谢谢您的帮助，关于并发性的想法很好！你们的演示看起来不错，但它应该停止在它的结束位置，一旦50%进入帧，并停止在那个点上移动。所以，一旦它滚动到位，当你向下滚动时，它们仍然粘在一起。基本上只显示在视图中，不显示任何内容。对不起，我以为是“直到元素的顶部到达视口的中间，此时它的顶部偏移量为0，并且保持在原来的位置。”。无论如何，不要着急，慢慢来，我感谢你的帮助。非常接近。@LouisW添加了一个演示，在两元素接触时保留0 Y位置！抱歉，看起来你的链接不再有效。“此垃圾桶是匿名创建的，其免费预览时间已过期”
body{
  height: 4000px;
}

.parallaxblock{
  position:fixed;
  background:#999;
  opacity:.5;
}

<div class="parallaxblock" data-p-offset=100>Im A Block</div>
<div class="parallaxblock" data-p-offset=200>Im Also Block</div>
<div class="parallaxblock" data-p-offset=1500>Im Another Block</div>