Question

我想慢慢滚动一个元素，以创建一个滚动动画效果。我有这段代码：

请参阅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/

希望这会有所帮助......

jQuery动画帮助

3 个答案: