jQuery移动元素然后钉住它并水平移动它

Question

我试图完成对this site的影响，但我只需要根据滚动移动几个东西。我的目标是让篮球进入盒子，然后在向下滚动一点之后，盒子就会进入卡车，并且所有物体都水平地跨过页面。另外，我希望在您向下滚动时发生这种情况，而不是像当前小提琴一样向上滚动。

这里我现在的Fiddle，最初是基于这个Fiddle。下面是js。

var fixedElement = false; 
    var changingMoment = 150; 
$(window).scroll(function() { 
// floatingContentMark lets us know where the element shall change from fixed to relative 
// and vice versa 
var distanceFromTop = $("#floatingContentMark").offset().top - $(this).scrollTop();  
    if ((distanceFromTop <= changingMoment && !fixedElement) || 
    (distanceFromTop >= changingMoment && fixedElement)) 
    { // either we came from top or bottom, same function is called 
     fixedElement = !fixedElement; 
    $('#box').trigger('fixElement'); 
    } 
    }); 

$('#box').bind('fixElement', function() { 
    if ($(this).css('position') != 'fixed') { 
    $(this).css('position', 'fixed') ; 
    $(this).css('top', changingMoment) ; 
} 
else { 
    $(this).css('position', 'relative') ; 
    $(this).css('top', 'auto') ; 
} 
}) ; 

Answer 1

我认为如果您使用框架或jQuery插件进行自定义/视差滚动，您的项目会容易得多。快速谷歌搜索带来了几个，可以轻松做你想做的：

• skrollr
• scrollorama
• scrollpath
• sequence.js
• stellar.js
• scrolly
• NikeBetterWorld
• Scrolling Parallax
• jarallax
• superscrollarama

一些灵感，检查出的页面中列出here。