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'});
  }

样式集菜单jQuery出错

1 个答案: