Javascript DIV滚动移动

Javascript DIV Movement on scroll

本文关键字：移动 滚动 DIV Javascript      更新时间：2023-09-26

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行的一半时向右滚动。

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

感谢

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

相关文章：