スクロールでコールバック関数が動作しないjqueryアニメーション

Question

以下は私のコードの一部です。私はjquery animationコールバック関数を使用しています。

headerとtop:-141pxをアニメーション化したい場合は、時間ギャップをあけてアニメーションし、top:-63pxとします。

$(window).scroll(function() { 
 
    if ($(this).scrollTop() > 1){ 
 

 
    $("#header").animate({ 
 
     position: 'fixed', 
 
     top: '-141px', 
 
    },function(){ 
 
     $(this).animate({ 
 
     position: 'fixed', 
 
     top: '-63px', 
 
     }) 
 
    }); 
 
    } 
 
});

*{ 
 
    margin:0; 
 
    padding:0 
 
} 
 

 
#header{ 
 
    height:141px; 
 
    background:#333; 
 
    color:#fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<header id="header"> 
 
    Header section 
 
</header> 
 

 
<div> 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
</div>

Answer 1

アニメーション方法はpositionのようなプロパティをサポートするので、それ

$(window).scroll(function() { 
 
    if ($(this).scrollTop() > 1) { 
 

 
    $("#header").stop(true).css({ 
 
     position: 'fixed' 
 
    }).animate({ 
 
     top: '-141px', 
 
    }, function() { 
 
     $(this).animate({ 
 
     top: '-63px', 
 
     }) 
 
    }); 
 
    } 
 
});

* { 
 
    margin: 0; 
 
    padding: 0 
 
} 
 
#header { 
 
    height: 141px; 
 
    background: #333; 
 
    color: #fff; 
 
} 
 
div { 
 
    height: 1000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<header id="header"> 
 
    Header section 
 
</header> 
 

 
<div> 
 
</div>