jQuery動畫幫助

Question

我想慢慢滾動elemnt，創建滾動動畫效果。我有這個代碼：

請參閱here。

滾動以查看。當我滾動頁面時，我想讓紅色框緩慢滾動。但現在它只能向下滾動+ 50px，但當你向上滾動紅色框時，請慢慢上去，但是慢慢地......

以前感謝！

Answer 1

查看我的示例小提琴here。這裏重要的是確保你使用setTimeout來避免大量的建立事件，因爲根據用戶滾動的方式，窗口滾動事件會被調用很多次。

代碼

var scrollId; 

$(document).scroll(scrollme); 

function scrollme(){ 
    window.clearTimeout(scrollId); 
    scrollId = window.setTimeout(scroll, 25); 
} 

function scroll(){ 
    $(".block").stop().animate({"top": ($(window).scrollTop()) + 30 + "px"}, 550); 
} 

Answer 2

這個例子將允許div來當用戶滾動向上滾動備份頁：http://jsfiddle.net/CJXEX/1/

$(document).scroll(function(event){ 
    var direction = scrollFunc(event); 
    $(".block").animate({"top": "direction" + "=1px"}, "slow"); 
4}); 

//Source: http://stackoverflow.com/questions/1222915/can-one-use-window-onscroll-method-to-include-detection-of-scroll-direction 
function scrollFunc(e) { 
    if (typeof scrollFunc.x == 'undefined') { 
     scrollFunc.x=window.pageXOffset; 
     scrollFunc.y=window.pageYOffset; 
    } 
    var diffX=scrollFunc.x-window.pageXOffset; 
    var diffY=scrollFunc.y-window.pageYOffset; 

    if(diffY<0) { 
     return "-"; 
    } else if(diffY>0) { 
     return "+"; 
    } else { 
     return "-"; 
    } 
    scrollFunc.x=window.pageXOffset; 
    scrollFunc.y=window.pageYOffset; 
} 

Answer 3

試試下面的jQuery插件，

http://www.smoothdivscroll.com/

希望這有助於...