スタイル設定メニューのエラーjQuery

Question

メニューのアニメーションに問題があります。

問題は、最初のdivに含まれるデータを表示するのに数秒かかることです。 私はこのページの同じ効果を持ってほしいhttp://www.global-seo.es/ページはスペイン語で、これはどんな言語であっても。 メニューの効果を観察できるかどうか。最初のdivは上に残り、メニューナビゲーションを含む2番目のdivは固定メニューになります。

私は同じ効果を実装できますか？ここ

完全なコードhttps://jsfiddle.net/gnzstmnj/

HTML

<header> 
    <div class="phone">123123123</div> 
    <div class="menu"></div> 
</header> 
<div class="content"> 
    asdasdasdas 
</div> 

CSS

*{padding: 0; margin :0} 
header{ 
    background: gold; 
    position: fixed; 
    top:0; 
    width: 100%; 
    height: 50px; 
} 
.phone{ 
    background: grey; 
    height: 40px; 
    width: 100%; 
} 
.menu{ 
    background: tomato; 
    height: 100px; 

} 
.content{ 
    widht: 100%; 
    height: 1000px; 
} 

jQueryの

$(document).ready(function(){ 
    var menu = $('header'); 
    var body = $('body'); 
     $(window).scroll(function(){ 
     if (body.scrollTop() > 40) { 
      menu.animate({'top': '-40px'}); 
     }else{ 
      menu.animate({'top': '0px'}); 
     } 
     }); 
    }); 

Answer 1

主な問題は、同じイベントの束を呼び出すことです。スクロールイベントごとにアニメーションがトリガーされ、1回のスワイプにつき5/6イベントになる可能性があります。

解決策は、イベントリスナーに.stop（）を追加することです。そのため、アニメーションがキューに入れられた場合は、別のアニメーションを追加する前に消去されます。

if (body.scrollTop() > 40) { 
    menu.stop().animate({'top': '-40px'}); 
    }else{ 
    menu.stop().animate({'top': '0px'}); 
    }