title: jQuery toggleClass with direction and animation
body: <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>