Javascript DIV在滚动上移动

NIm创建一个在滚动时递增移动div的动画。我很接近，但我不认为我的代码是最有效的，我不知道如何适应它来添加更多的参数。因此，例如，在页面上打一定高度，然后将对象向右移动并停止向下移动。下面是我的JS和codepen可以找到;Javascript DIV在滚动上移动

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

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

感谢

来源

2014-09-10 DIM3NSION

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选择（注$箱变）。否则，jQuery将不得不在每个滚动事件中查询DOM。

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

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

来源

2014-09-10 14:53:18 Jason

感谢您的回复杰森，这是完美的。我将如何添加另一个参数来说明当它滚动到目前为止离开然后开始向下滚动？添加一个额外的，如果？我假设我需要重新设置scrolltop以及检测盒子走多远？ – DIM3NSION 2014-09-10 15:03:24

是的，添加另一个'else if'。 – Jason 2014-09-10 15:04:17

如果性能实际上是一个问题，**纯粹** Javascript是要走的路。仅使用jQuery来放置事件处理程序和完全使用纯旧的Javascript完成处理。 – 2014-09-10 15:10:43

Javascript DIV在滚动上移动

回答

相关问题