Javascript DIV滚动运动

Question

NIm创建一个动画，在滚动中递增地移动div。我很接近，但我不认为我的代码是最有效的，我不知道如何调整它以添加更多参数。例如，在页面上点击某个高度会将对象向右移动并停止向下移动。下面是我的JS和代码笔可以在；

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)但是，在大多数移动设备上，滚动事件仅在滚动完成时触发，而不是在页面滚动时触发。