自定義視差

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; 

    }); 
}); 

正如您可以猜到這只是移動項目的權利，直到它熄滅屏幕。這種方式有不同的結果，因爲如果我使用滾輪，則消耗較長的時間以使用滾動條。我還有另一個問題，如果我使用混合物或有不同的視口，我會得到不同的結果。

任何提示或指針，以實現我所追求的結果？

我的代碼的工作示例是http://motoring.egl.me.uk

感謝馬特

Answer 1

有點過時，但FYI ...

在你的jQuery初始化或準備情況，您需要初始化每節，文章，項目或任何它（item.each）來實例化一個滾動函數，以便每個人都有它自己的滾動功能。

this.each(function(index) { 

然後在滾動功能，只處理該事件，如果是「當前」部分。您需要一些方法來確定哪個項目是「當前」項目。通常這是通過將每個項目的窗口大小保存到一個全局數組中，然後將其與當前位置進行比較來完成的。

喜歡的東西：

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

這樣，一旦一個項目熄滅屏幕，下一項目應該成爲「當前」和繼續（你設計你的代碼將會有非常不同的方式）滾動。