2

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

目前我有：

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;

   }); 
});

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

任何提示或指示来实现我所追求的结果？

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

谢谢马特

4

1 回答 1

1

有点过时了，但仅供参考...

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

this.each(function(index) {

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

类似于：（您设计代码的方式可能会非常不同）

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

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

于 2012-07-21T09:56:38.977 回答