Is there a way to ease in and out an animated div without using negative pixel values?

Question

I am wanting the navigation bar to ease in and out at a certain anchor point. I have accomplished the task, however I am finding that scrolling while the animation is occurring will interrupt the animation due to the negative pixel values and the top of the document. Is there a way to have the navigation use the animation I have setup without using the negative pixel values to hide and show it?

I have tried the .show()/.hide() options with visibility: hidden;, but I cant seem to figure out how to incorporate them with .animate().

var t = $("#about").offset().top;

$(window).scroll(function(){
    if( $(document).scrollTop() >= t ) {
        $('#global-nav').stop().animate({top: '0px'}, 500, 'easeOutBounce');
    } else {
        $('#global-nav').stop().animate({top: '-50px'}, 500, 'easeInExpo');
    }		
}); 

html { height: 2000px; } 

#global-nav {
    height:50px;
    background:#000;
    z-index: 9999;
    position: fixed; 
    left: 0; 
    top: -50px; 
    width: 100%;
    color:#fff;
    text-align:center;
    
}
#global-nav p {
    margin-top:15px;
}
#about{
   margin-top:600px;
}

<div id="global-nav"><p>Navigation</p>.</div>

<div id="about"></div>

This is what I have accomplished so far: http://jsfiddle.net/Hysteresis/0oazqj4y/43/

Any help will be much appreciated.

Answer 1

Actually your animation uses easing effect and for that it looks like that it's hesitating but if you remove the easing effect from when hiding the item then it'll look smother; for example:

// Without "easeInExpo" easing effect
else {
    $('#global-nav').stop()
    .animate({top: '-50px'}, 500);
}

This looks smooth.