使用jQuery动画滚动

Question

好吧,我在尝试使用滚动事件上的条件动画DOM的几个元素时遇到问题.首先,我使用的是Drupal 7,因此我使用的jQuery库是1.4.4版本.

现在,我希望通过更改页面内部元素的css属性来缩小页面向下滚动时页眉的大小.

首先,在scroll事件中,我检查窗口的scrollTop位置.如果位置不同于0(意味着页面向下滚动),我会在标题内的元素上触发动画.

如果位置等于零,我希望css属性回退到其原始状态,以便标头检索其完整大小.

动画的第一部分工作得很好.当我向下滚动页面时,标题会按预期收缩.但是当我将页面向上滚动到顶部时,第二个动画不起作用..动画都是错误的并且在几秒钟之后发生并且变得狂野,来回改变受该animate()函数影响的css属性.

有没有人知道如何清除这个？

这是我正在使用的代码的简化部分:

$(window).scroll(function(){            

    if($(window).scrollTop() != 0){
        $('#myFirstElement').animate({marginTop: '20px'}, 300);
        $('#mySecondElement').animate({top: '20px'}, 300);
    }       
    else {
        $('#myFirstElement').animate({marginTop: '32px'}, 300);
        $('#mySecondElement').animate({top: '32px'}, 300);
    }

});

Answer 1

你可以用类似的东西

http://jsfiddle.net/HjFH4/

$elem1 = $('#myFirstElement');
$elem2 = $('#mySecondElement');
var scrollState = 'top';

$(window).scroll(function(){ 

    var scrollPos = $(window).scrollTop();

    if( ( scrollPos != 0 ) && ( scrollState === 'top' ) ) {
        $elem1.stop().animate({marginTop: '0px'}, 300);
        $elem2.stop().animate({height: '10px'}, 300);
        scrollState = 'scrolled';
    }       
    else if( ( scrollPos === 0 ) && ( scrollState === 'scrolled' ) ) {
        $elem1.stop().animate({marginTop: '32px'}, 300);
        $elem2.stop().animate({height: '80px'}, 300);
        scrollState = 'top';
    }

});