Question

NIm创建一个动画，在滚动时递增地移动div。我很接近，但我认为我的代码效率最高，而且我不知道如何调整代码以增加更多参数。因此，例如，在页面上达到某个高度然后将对象向右移动并停止向下移动。下面是我的JS和codepen可以在;

找到

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

Javascript DIV滚动运动

1 个答案: