Fixed Nav Menu - How to animate in and out using javascript?

Question

I am trying to created a fixed navigation menu that appears when the user scrolls past 500px, and disappears as the user scrolls back up the page.

However, I don't want it to just appear and disappear, but to animate in and out in a sliding motion.

I found part of the answer to this question on Stackoverflow (link). JSFiddle solution: http://jsfiddle.net/k3AHM/1/

var nav = $('.nav');
var scrolled = false;

$(window).scroll(function () {

if (500 < $(window).scrollTop() && !scrolled) {
    nav.addClass('visible').animate({ top: '0px' });
    scrolled = true;
}

if (500 > $(window).scrollTop() && scrolled) {
    nav.removeClass('visible').css('top', '-30px');
    scrolled = false;      
}

The above code works to the extent that the fixed nav menu animates into view when user goes past 500px. However, I need the menu to animate out again as the user scrolls back up the screen instead of just disappearing instantly.

I would be very grateful if anyone can suggest changes to the javascript which allow the menu to animate both in and out?

Thank you!

Answer 1

You could do something like:

http://jsfiddle.net/k3AHM/4/

 if (500 > $(window).scrollTop() && scrolled) {
   //animates it out of view
   nav.animate({ top: '-30px' });  
   //sets it back to the top
    setTimeout(function(){
       nav.removeClass('visible');
    },500);
    scrolled = false;      
}