if/else文でアニメーションが機能しない

Question

ここにこのコードがあります。ページを下にスクロールすると、フローティングメニューがポップダウンするようになっています。テスト目的のために、私はページが最初に読み込まれるときに-15pxの余白 - 上部で表示されたメニューを持っています。予想どおり、メニューが表示されますが、スクロールするとすぐにメニューは消えます。そしてその部分もうまくいく。ファンキーなのは、私が770以上にスクロールすると、戻ってこないということです。 if/elseステートメントに他のコードスニペットを入れて、引数がfalse/trueを正しく返していることを確認していたので、最初のif/elseステートメントが動作しない理由はわかりません。

function showMenu() { 

    if(document.body.scrollTop >= 770) { 
     $("#floating-menu").animate({marginTop: "40px"}, 500); 
    } else if (document.body.scrollTop < 770) { 
     $("#floating-menu").animate({marginTop: "-100px"}, 500); 
    } 
} 
$(window).scroll(function() { 
    showMenu(); 

}); 

、ここでは私のCSSです：

#floating-menu { 
    height: 100px; 
    width: 100%; 
    position: fixed; 
    z-index: 99; 
    top: 0; 
    background-color: #fff; 
    border-bottom: 1px solid #ccc; 
    box-shadow: 1px 1px 2px #000; 
    margin-top: -15px; 
} 

Answer 1

はそれを考え出しました。 ： - /明らかに、私は.stop（）を使う必要があった。