jQuery toggleClass with direction and animation
<p>I've followed a tutorial to add to my site a fixed header after scroll and the logo of the site appear on the fixed part.</p>

<p>That works, the code:</p>

<pre><code>var nav_container = $(".nav-container");
var nav = $("nav");
var logo = $("logo");

nav_container.waypoint({
    handler: function(event, direction) {
        nav.toggleClass('sticky', direction=='down');
        logo.toggleClass('logo_sticky', direction=='down');
        if (direction == 'down')
            nav_container.css({ 'height' : nav.outerHeight() });
        else
            nav_container.css({ 'height' : 'auto' });
    });
});
</code></pre>

<p>How can I add a delay with fade-in to the logo, so it doesn't appear suddenly?</p>

<p>Versions I've tried:</p>

<pre><code>logo.toggleClass('logo_sticky', direction=='down').delay(500).fadeIn('slow');

logo.delay(500).toggleClass('logo_sticky', direction=='down').fadeIn('slow');
</code></pre>

<p>(before the toggleClass)</p>

<pre><code>logo.delay(500).fadeIn('slow')
logo.toggleClass('logo_sticky', direction=='down');
</code></pre>

<p>(after the toggleClass)</p>

<pre><code>logo.toggleClass('logo_sticky', direction=='down');
logo.delay(500).fadeIn('slow')
</code></pre>

<p>To be honest I've tried every single combination that came to my mind lol
new version that I'm trying that don't work either:</p>

<pre><code>$(function() {
        var nav_container = $(".nav-container");
        var nav = $("nav");
        var logo = $("logo");
        $.waypoints.settings.scrollThrottle = 30;

        nav_container.waypoint({
            handler: function(event, direction) {
                if (direction == 'down'){
                    nav_container.css({ 'height':nav.outerHeight() });
                    nav.addClass('sticky', direction=='down').stop();
                    logo.css({"visibility":"visible"}).fadeIn("slow");
                }
                else{
                    nav_container.css({ 'height':'auto' });
                    nav.removeClass('sticky', direction=='down').stop();
                    logo.css({"visibility":"hidden"});
                }
                },
            offset: function() {
                return (0);
            }   
        });
    });
</code></pre>

<p>but if I instead of fadeIn put toggle it animes the change but in a bad direction (the img appear and then toggle to disapear)
thanks </p>
