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插件进行自定义/视差滚动，我认为您的项目会更容易。快速谷歌搜索带来了几个可以轻松做到你想要的东西：

要获得一些灵感，请查看列出的here页面。

jQuery移动元素然后将其固定并水平移动

1 个答案: