Scroll 视差效果-在滚动时计算子对象到父对象的偏移

Scroll 视差效果-在滚动时计算子对象到父对象的偏移,scroll,parent,offset,parallax,absolute,Scroll,Parent,Offset,Parallax,Absolute,我试图创建一个视差效果,使绝对定位的子元素的移动速度比滚动上的父元素慢 子对象的高度始终为父对象的130%,但父对象的高度可以是任意高度: HTML: 你好,世界 你好,世界 我想出来了 对于将来在这个问题上遇到障碍的人来说,诀窍是用窗口滚动量减去元素的偏移顶部减去元素的高度的剩余值替换窗口滚动值 然后,通过将容器高度和元素高度之间的差值除以窗口和容器中的最大值来计算速度: // Wrong: // value = -Math.round((win_top * diff)); // Rig

我试图创建一个视差效果,使绝对定位的子元素的移动速度比滚动上的父元素慢

子对象的高度始终为父对象的130%,但父对象的高度可以是任意高度:

HTML:


你好,世界
你好,世界
我想出来了

对于将来在这个问题上遇到障碍的人来说,诀窍是用窗口滚动量减去元素的偏移顶部减去元素的高度的剩余值替换窗口滚动值

然后,通过将容器高度和元素高度之间的差值除以窗口和容器中的最大值来计算速度:

// Wrong:
// value = -Math.round((win_top * diff));

// Right:
var diff = elem_h - cont_h,
    max = Math.max(cont_h, win_h),
    speed = diff / max,
    cont_scrolled = win_top - cont_top - cont_h,
    value = Math.round(cont_scrolled * speed);

para.css('top', value + 'px');
完整工作代码:

(函数(){
var lastTime=0;
var供应商=['ms','moz','webkit','o'];
对于(var x=0;xwin_top&¶.cont_top