Javascript 自定义视差

我正在尝试创建我自己的自定义视差插件，这样我就可以选择项目从屏幕上转移的方向，我只需要确保无论用户如何滚动，无论窗口大小，对象都会在正确的点消失

目前我有：

var lastScrollTop = 0;
var logoStartPos = $('.bg-logo').position().left;
$(function(){
   $(window).scroll(function(){

       var st = $(this).scrollTop();
       if (st > lastScrollTop){
          if($('.bg-logo').is(':in-viewport'))
            $('.bg-logo').css({'left':($('.bg-logo').position().left+10) + "px"});
       } else {
          if($('.bg-logo').is(':in-viewport') && logoStartPos < $('.bg-logo').position().left)
            $('.bg-logo').css({'left':($('.bg-logo').position().left-10) + "px"});
       }
       lastScrollTop = st;

   }); 
});

var lastScrollTop=0；
var logoStartPos=$（'.bg logo'）.position（）.left；
$（函数（）{
$（窗口）。滚动（函数（）{
var st=$（this.scrollTop（）；
如果（st>lastScrollTop）{
如果（$（'.bg logo'）。是（':in viewport'））
$（'.bg logo'）.css（{'left'：（$（'.bg logo'）.position（）.left+10）+“px”}）；
}否则{
如果（$（'.bg logo'）.is（':in viewport'）&&logoStartPos<$（'.bg logo'）.position（）.left）
$（'.bg logo'）.css（{'left'：（$（'.bg logo'）.position（）.left-10）+“px”}）；
}
lastScrollTop=st；
}); 
});

您可以猜到，这只会将项目向右移动，直到它离开屏幕。这种方式有不同的结果，因为如果我使用滚轮，它需要更长的时间才能消失，如果我使用滚动条。我还有另一个问题，如果我使用一个混合或有一个不同的视图端口，我会得到不同的结果

要达到我想要的结果，有什么建议吗

我的代码的一个工作示例位于

---

谢谢Matt，有点过时了，但仅供参考

在jqueryinitialize或ready事件中，您需要初始化每个节、文章、项或任何内容（item.each）来实例化一个滚动函数，以便每个节、文章、项都有自己的滚动函数

this.each(function(index) { 

然后在滚动功能中，仅处理事件（如果是“当前”部分）。您需要某种方法来确定哪个项目是“当前”项目。这通常是通过将每个项目的窗口大小保存到全局数组中，然后使用该数组与当前位置进行比较来完成的

比如：（您设计代码的方式可能会非常不同）

这样，一旦一个项目离开屏幕，下一个项目应该成为“当前”并继续滚动

// If this section is in view
if ( ($window.scrollTop() + $window.height()) > (topOffset) &&
   ( (topOffset + $self.height()) > $window.scrollTop() ) )