样式设置菜单jQuery中的错误

我的菜单动画有问题。

问题是显示第一格中包含的数据需要花费几秒钟。无论哪种语言，我都希望此页面具有相同的效果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'});
        }
      });
    });