1

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.

Hysteresis
  • 87
  • 1
  • 8
  • Can you rephrase this "I am finding that scrolling while the animation is occurring will interrupt the animation due to the negative pixel values"? Not clear tho. [This looks fine](http://jsfiddle.net/0oazqj4y/50/). – The Alpha Nov 09 '14 at 05:47
  • Sorry about that. I guess the problem lies mostly with the animation when scrolling back up. The animation hesitates/stutters if the user keeps scrolling up since it is trying to find the top of the document to animate back up too. I added a larger margin so you can hopefully see what I mean. http://jsfiddle.net/Hysteresis/0oazqj4y/51/ . – Hysteresis Nov 09 '14 at 06:16

1 Answers1

0

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.

The Alpha
  • 143,660
  • 29
  • 287
  • 307
  • I would have to agree. Thank you! I liked the ease in effect, but it was causing the problem. That's why I was curious if there was another way to hide the navigation besides using negative pixel values, but this is a good fix for now. I appreciate your help! – Hysteresis Nov 09 '14 at 06:31
  • You are welcome and I already provided an updated example in the comment, probably you didn't notice it :-) – The Alpha Nov 09 '14 at 06:32
  • 1
    Ah yes, I see that now. Thanks again! – Hysteresis Nov 09 '14 at 06:34