J. Doe J. Doe - 4 months ago 29
jQuery Question

Error in the style set menu jQuery

I have problem with the menu animation.

the problem is that it takes several seconds to display the data contained in the first div.
I want to have the same effect of this page http://www.global-seo.es/ the page this in Spanish, no matter what language.
if they can observe the effect of menu. "the first div stays on top, and the second div containing the menu navigation becomes a fixed menu."

¿as I can implement the same effect?

here the complete code 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

The main problem is that you are calling a bunch of the same event; every scroll event triggers an animation, and that could be 5/6 events per finger swipe.

A solution is to add .stop() to your event listeners, so that if an animation was queued, it will be erased before adding another.

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