jQuery: animate(); with delay time

Question

I need a little help with animate() jQuery function.

I want when you scrollDown the white bar to get smaller a bit and when you come back in top of the page, the white bar to return to normal.When I scrollDown, it works ok, but when I scrollTop the white bar return to normal with delay and I don't know why.I don't want it. If you can, please help me. Thank you! Sorry for my english.

HTML:

<div id="header">
        <div id="sticky_navigation">
            <div class="container">
              <div class="row-fluid">
                <!-- Logo Block -->
                <div class="span2">
                  <a href="#"><div class="logo1"></div></a>
                </div>

                <!-- Nav Block -->
                <div class="span6">
                  <ul class="nav">
                    <li><a href="#" class="active">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Testimonials</a></li>
                    <li><a href="#">Faq</a></li>
                    <li><a href="#">Blog</a></li>
                  </ul>
                </div>

                <!-- Contact Block -->
                <div class="span4">
                  <ul class="contact-list pull-right">
                    <li><a href="#"><span class="contact"></span>Contact Us</a></li>
                    <li><a href="#"><span class="cell"></span>(03) 9028 2424</a></li>
                  </ul>
                </div>
              </div>
            </div>
        </div>
    </div><!-- #header -->

CSS:

.header {
    border-bottom: 1px solid #a4a4a4;
}

#sticky_navigation {
    width: 100%;
    z-index: 200;
    background: #fff;
    border-bottom: 1px solid #a4a4a4;
}

.logo1 {
    background-position: 0 -186px ;
    width: 169px;
    height: 27px;
    margin: 30px 0 28px 0;
}

.nav {
    margin:39px 0 0 0px;
}

.nav li {
    float: left;
    margin-left: 25px
}

.nav li a, .contact-list li a {
    text-transform: uppercase;
    text-decoration: none;
    color: #777777;
    font-size: 18px;
    font-weight: bold;
    background-color: none;
}

.nav li a:hover, .nav li a.active {
    color: #000;
    background-color: none;
}

.contact-list {
    margin: 39px 0 0 0;
}

.contact-list li {
    float: left;
}

.contact-list li:first-child {
    margin-right: 32px;
}

.contact, .cell {
    display: block;
    float: left; 
    margin:2px 9px 0 0;
}

.cell {
    background-position: -201px -101px ;
    width: 16px;
    height: 16px;
}

.contact {
    background-position: -178px -101px ;
    width: 19px;
    height: 15px;
}

JS:

var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop();


if (scroll_top > sticky_navigation_offset_top) { 
    $('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });

    $( ".logo1" ).animate({ marginTop: '10px' }, 1000);
    $( ".nav" ).animate({ marginTop: '19px'}, 1000);
    $( ".contact-list" ).animate({ marginTop: '19px' }, 1000);

} else {
    $('#sticky_navigation').css({ 'position': 'relative' }); 

    $( ".logo1" ).animate({ marginTop: '30px' }, 1000);
    $( ".nav" ).animate({ marginTop: '39px'}, 1000);
    $( ".contact-list" ).animate({ marginTop: '39px' }, 1000);

}   
    };


sticky_navigation();


$(window).scroll(function() {
     sticky_navigation();
});

Answer 1

I think your Problem is that you call on "every" scroll the sticky-navigation() function. So if the user scrolls sticky_navigation() is called a few times and the animations go to the Queue. This ofcourse will cause a delay. I guess calling the stop() function on your elements will have the effect you want.

 $( ".logo1" ).stop(true,true).animate({ marginTop: '10px' }, 1000);
    $( ".nav" ).stop(true,true).animate({ marginTop: '19px'}, 1000);
    $( ".contact-list" ).stop(true,true).animate({ marginTop: '19px' }, 1000);

and

$( ".logo1" ).stop(true,true).animate({ marginTop: '30px' }, 1000);
    $( ".nav" ).stop(true,true).animate({ marginTop: '39px'}, 1000);
    $( ".contact-list" ).stop(true,true).animate({ marginTop: '39px' }, 1000);

....but even this calls unnecessary often the animate function....i think better would be:

function sticky_navigation(){

var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop();
var sDown = true;
var sUp = false; // could also be true (and must be true if you scrollDown by Default with JavaScript after pageload)


if (scroll_top > sticky_navigation_offset_top) { 
   if(sDown){
    sDown = false;
    sUp = true;
    $('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });

    $( ".logo1" ).stop(true,true).animate({ marginTop: '10px' }, 1000);
    $( ".nav" ).stop(true,true).animate({ marginTop: '19px'}, 1000);
    $( ".contact-list" ).stop(true,true).animate({ marginTop: '19px' }, 1000);
   }
} else {
if(sUp){
    sUp=false;
    sDown=true;

    $('#sticky_navigation').css({ 'position': 'relative' }); 

    $( ".logo1" ).stop(true,true).animate({ marginTop: '30px' }, 1000);
    $( ".nav" ).stop(true,true).animate({ marginTop: '39px'}, 1000);
    $( ".contact-list" ).stop(true,true).animate({ marginTop: '39px' }, 1000);
   }

}   
    };

Answer 2

Possible duplicate of Issue with an animated, sticky navigation in jQuery
Also, you could check some jQuery plugin wich does the job, for example http://stickyjs.com/