title: CSS Transition not firing when adding class to body (Firefox)
body: <p>I am creating a sticky header on a site that decreases padding of 2 elements once the page starts scrolling.  To do so, I add a class to the body tag once scrolling begins and have transitions set up to animate once that class is added.  This works fine in webkit browsers but not in firefox?  Here is a JSFiddle of the issue. <a href="http://jsfiddle.net/5HLyu/11/" rel="nofollow">http://jsfiddle.net/5HLyu/11/</a>. Any help is appreciated!</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="header-wrapper"&gt;
      &lt;div class="header"&gt;
          Header
      &lt;/div&gt;
      &lt;div class="menu"&gt;
          Menu
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body{height:1000px; overflow:scroll; padding:0; margin:0}
  .header{background:#00457c; color:#fff; padding:22px 0; text-align:center;
      -webkit-transition:all 250ms ease-out;
      -moz-transition:all 250ms ease-out;
      -ms-transition:all 250ms ease-out;
      -o-transition:all 250ms ease-out;
      transition:all 250ms ease-out;
  }
  .menu{background:#aaa; padding:22px 0; text-align:center;
      -webkit-transition:all 250ms ease-out;
      -moz-transition:all 250ms ease-out;
      -ms-transition:all 250ms ease-out;
      -o-transition:all 250ms ease-out;
      transition:all 250ms ease-out;
  }
  
  .down .header-wrapper{position:fixed; top:0; width:100%; z-index:1000}
  .down .header{padding:10px 0}
  .down .menu{padding:10px 0}
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>(function($){
      $(window).on("scroll", function() {
          var fromTop = $(window).scrollTop();
          $("body").toggleClass("down", (fromTop &gt; 1));
      });
  })(jQuery);
  </code></pre>