javascript - 自定义视差

Question

我正在尝试创建我自己的自定义视差插件，以便我能够选择项目离开屏幕的方向，我只是坚持确保无论用户如何滚动，无论对象在正确位置消失的窗口大小。

目前我有:

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;

   }); 
});

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

有什么提示或指示可以实现我想要的结果吗？

我的代码的一个工作示例位于 http://motoring.egl.me.uk

谢谢马特

Answer 1

有点过时，但仅供引用...

在你的 jQuery initialize 或 ready 事件中，你需要初始化每个部分、文章、项目或任何它是 (item.each) 以实例化滚动功能，以便每个都有自己的滚动功能。

this.each(function(index) { 

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

类似于:(您设计代码的方式可能会非常不同)

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

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