title: Fade a div when I begin to scroll
body: <p>I have a fixed header when I begin to scroll the header changes its height and removes the logo. What I would like to do is have the logo fadeout instead of just disappearing. How can I achieve this effect?</p>
  
  <p>For testing purposes I am unable to display my logo in jsfiddle because it is a custom font so I will be using #mainlogo as my example. Here is my code <a href="http://jsfiddle.net/Bx4rq/9/" rel="nofollow">http://jsfiddle.net/Bx4rq/9/</a></p>
  
  <p><strong>JS</strong></p>
  
  <pre><code> $(window).scroll(function() {
          if ($(this).scrollTop() &gt; 30){  
    $('#headerWrapper, .icon-lkbl, #mainLogo, .nav-collapse').addClass("sticky");
        }
          else{
    $('#headerWrapper, .icon-lkbl, #mainLogo, .nav-collapse').removeClass("sticky");
   }
   });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code> #headerWrapper.sticky { height: 48px; }
   .icon-lkbl.sticky,  #mainLogo.sticky { display:none;}
   .nav-collapse.sticky{ margin-top:-10px;}
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>  &lt;div id="headerWrapper"&gt;
          &lt;header&gt;
                &lt;a href="#" rel="home"&gt;
                      &lt;div class="iconMain icon-lkbl"&gt;&lt;/div&gt;
                      &lt;h1 id="mainLogo"&gt;Logo &lt;strong&gt;Test&lt;/strong&gt;&lt;/h1&gt;
                &lt;/a&gt;
    &lt;nav id="mainNav" class="nav-collapse"&gt;
          &lt;ul&gt;
                &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="recipes.html"&gt;Recipes&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="garden.html"&gt;Garden&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#" rel="popuprel" class="iconMain icon-search search popup"&gt;       &lt;span&gt;Search&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
    &lt;/nav&gt;
    &lt;div class="popupbox" id="popuprel"&gt;
          &lt;div id="searchPanel"&gt;
                &lt;h2&gt;&lt;span&gt;Find your&lt;/span&gt; next meal&lt;/h2&gt;
          &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="fade"&gt;&lt;/div&gt;
    &lt;/header&gt;
    &lt;/div&gt; &lt;!-- END HEADER WRAPPER --&gt;
  </code></pre>