風格設置菜單jQuery的錯誤

Question

我有菜單動畫的問題。

問題是，它需要幾秒鐘來顯示包含在第一個div中的數據。 我想要和西班牙語這個頁面具有相同的效果http://www.global-seo.es/，不管用什麼語言。 如果他們可以觀察菜單的效果。 「第一個div保持在最前面，而包含菜單導航的第二個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

主要問題是你正在調用一堆相同的事件;每個滾動事件都會觸發一個動畫，並且每個手指滑動可能是5/6個事件。

解決方案是將.stop（）添加到您的事件偵聽器，以便如果動畫排隊，它將在添加另一個之前被擦除。

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