javascript - jQuery 移动元素然后固定它并水平移动它

Question

我正试图在 this site 上实现效果，但我只需要根据滚动来移动一些东西。我的目标是让篮球进入箱子，然后在向下滚动一点后箱子进入卡车并且所有物体都水平地穿过页面。此外，我希望在您向下滚动时发生这种情况，而不是像当前 fiddle 那样在向上滚动时发生。

这是我当前的 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 .