Javascript DIV 在滚动上移动

Question

我正在创建一个在滚动时增量移动 div 的动画。我很接近，但我不认为我的代码是最有效的，而且我不知道如何调整它以添加更多参数。例如，在页面上达到一定高度后，对象就会向右移动并停止向下移动。下面是我的 JS，codepen 可以在以下位置找到:

http://codepen.io/anon/pen/KxHwu - 原创

http://codepen.io/anon/pen/DLxqg - 向右移动搞乱

var lastScrollTop = 0;
var boxPosition = $('#box').position();
var row2Position = $('#row2').position();

var distance = $('#row2').offset().top,
    $window = $(window);

console.log(distance);

$window.scroll(function() {
    if ( $window.scrollTop() >= distance - 400 ) {
      var st = $(window).scrollTop();
      console.log(st);

      $('#box').css({top: 0 + st});

      //CODE NOT WORKING

      if(st >= 270) {
        var boxPos = $('#box').position();
        console.log(boxPos.left);
        $('#box').css({left: boxPos.left + st});
      }

      //
    lastScrollTop = st;

    }
});

我正在寻找像它一样开始滚动的框，然后当它到达第 2 行的一半时向右滚动。

我希望我已经用简单的方式解释了这一点!

谢谢

Answer 1

http://codepen.io/anon/pen/tHwlq

这是一个如何执行此操作的示例；您需要调整数字以使其按您的计划运行。

var $window = $(window);
var $box = $("#box");

$window.scroll(function() {
    var scrollTop = $window.scrollTop();

    if (scrollTop >= 250 && scrollTop < 400) {
      $box.css({top: -250 + scrollTop});      
    } else if(scrollTop >= 400 && scrollTop < 600) {
      $box.css({left: (50+(scrollTop-400)/2)+"%"})
    }
});

如果您的元素有大量这样的元素，我建议使用 ScrollMagic ( http://janpaepke.github.io/ScrollMagic/ ) 库。

就效率而言，我建议如下:

1) 缓存 jQuery 选择器(注意 $box 变量)。否则，jQuery 将不得不在每个滚动事件上查询 DOM。

2) 缓存scrollTop，而不是在事件回调中多次查询它。

3) 虽然 left 和 top 可以工作，但使用 transform:translate() 属性效率更高，尤其是在移动设备上。 (https://developer.mozilla.org/en-US/docs/Web/CSS/transform)。但是，在大多数移动设备上，滚动事件仅在滚动完成时触发，而不是在页面滚动时触发。