jquery - 样式集菜单 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'});
  }