Javascript 计算特定元素在窗口中的滚动位置，而不是整个文档

我正在制作基于滚动的视差

我想实现元素只有在进入视口后才开始移动，并且移动是基于上下滚动的，就像标准视差行为一样

但这不起作用，因为当我滚动到

.wrap

视差元素已经移动了很多，我需要它们在

.wrap

到达视口时开始移动

这就是我试过的。在视口中可以看到.wrap的顶部之后，我启动了该函数。这是可行的，但问题是，在.wrap显示后，立即为整个文档计算基于滚动的位置，视差元素跳到顶部

我需要的是从“.wrap”开始计算滚动，或者在

.wrap

可见时根据od文档滚动

var元素=$（“.wrap”）；
var topOfElement=element.offset（）.top；
var bottomOfElement=element.offset（）.top+element.outerHeight（true）；
变量$window=$（window）；
$window.bind（'scroll'，function（）{
var scrollTopPosition=$window.scrollTop（）+$window.height（）；
var windowScrollTop=$window.scrollTop（）
如果（windowScrollTop>topOfElement&&windowScrollTopbottomOfElement&&windowScrollTop>topOfElement）{
//元素已隐藏（位于可视区域上方）
log（“元素被隐藏（在可视区域上方）”；
}else if（scrollTopPositiontopOfElement）{
//元素部分可见（在可视区域下方）
console.log（0.8*滚动）；
TweenMax.set（“.scroll-parallax-1”，{y:0.1*-scrollY}）；
TweenMax.set（“.scroll-parallax-2”，{y:0.2*-scrollY}）；
TweenMax.set（“.scroll-parallax-3”，{y:0.4*-scrollY}）；
TweenMax.set（“.scroll-parallax-4”，{y:0.7*-scrollY}）；
TweenMax.set（“.scroll-parallax-5”，{y:1.2*-scrollY}）；
}否则{
//元素是完全可见的
log（“元素完全可见”）；
}
});
.asd{
宽度：800px；
高度：2000px；
位置：相对位置；
背景：#000；
不透明度：0.3；
左：50px；
}
.包裹{
宽度：800px；
高度：800px；
背景：#111；
}
.a{
宽度：100px；
高度：100px；
位置：相对位置；
背景:#f50；
不透明度：0.5；
左：50px；
}
.b{
宽度：100px；
高度：100px；
位置：相对位置；
背景：#f80；
不透明度：0.5；
左：50px；
}
c{
宽度：100px；
高度：100px；
位置：相对位置；
背景：#ccc；
不透明度：0.5；
左：50px；
}
博士{
宽度：100px；
高度：100px；
位置：相对位置；
背景:#f10；
不透明度：0.5；
左：50px；
}
e{
宽度：100px；
高度：100px；
位置：相对位置；
背景：#d50；
不透明度：0.5；
左：50px；
}