滚动到顶部时为什么动画不起作用？

Question

我有进度条问题。页面加载时，标题中的水平进度条动画显示指定的宽度。当我们开始滚动页面时，此栏应该从100％宽度动画到0％宽度并且它可以工作。但是当我们滚动到顶部时，这个进度条不起作用。

var loader = $('#dottedProgressBar');
var loader2 = $('#dottedProgressBar2');
var loader3 = $('#dottedProgressBar3');
var time = 1300; 
var max_width = loader.width();
var max_width2 = loader2.width();
var max_width3 = loader3.width();

loader.width(0);
loader2.width(0);
loader3.width(0);


    loader.animate({
        width: max_width
    }, time);

    loader2.animate({
        width: max_width2
    }, time);

    loader3.animate({
        width: max_width3
    }, time);       

 $(document).scroll(function(){

    if ($(document).scrollTop() > 0) {

            loader.animate({
                width: '0px',
                opacity: '0'
             }, 1300);

            loader2.animate({
                width: '0px',
                opacity: '0'
             }, 1300);

            loader3.animate({
                width: '0px',
                opacity: '0'
             }, 1300);              
        }

        if ($(document).scrollTop() == 0){

            loader.animate({
                width: '550px',
                opacity: '1'
            }, 300);

            loader2.animate({
                width: '550px',
                opacity: '1'
            }, 300);

            loader3.animate({
                width: '500px',
                opacity: '1'
            }, 300);    
        }