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在滾動上移動

回答

相關問題