Home/ Questions/Q 7550343
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T10:11:16+00:00

I’m trying to hide the menu when the scroll reach 150px HTML: <html> <body

  • 0

I’m trying to hide the menu when the scroll reach 150px

HTML:

<html>
<body style="height:2000px">
    <div id="header">
    </div>
</body>
</html>

CSS:

#header{height:200px; background:#000; position:fixed; top:0; width:100%;}

JS:

$(function(){
    $(window).bind('scroll', function(){
        if($(this).scrollTop() >= 150) {
            $('#header').attr('data-open','open');
        }
        if($(this).scrollTop() >= 150 && $('#header').attr('data-open') == 'open'){
            $("#header").animate({top:'-180px'},500, 'linear').attr('data-open','open');
        }else{
            $("#header").animate({top:'0'},500, 'linear').removeAttr('data-open');
        }
    });
});

demo: http://jsfiddle.net/egZ6H/1/

It seem working but when I go back on top, sometimes the animation to show the menu start a little too late and vice versa.

What causing this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to call .stop() before each animation call to ensure it doesn’t wait to finish the last animation before starting this one.

    See updated jsFiddle.

    Code is:

    $(function(){
    $(window).bind('scroll', function(){
        if($(this).scrollTop() >= 150) {
            $('#header').data('open','open');
        }
        if($(this).scrollTop() >= 150 && $('#header').data('open') == 'open'){
            $("#header").stop().animate({top:'-180px'},500, 'linear').data('open','open');
        }else{
            $("#header").stop().animate({top:'0'},500, 'linear').data('open', null);
        }
    });
});​
    • 0