title: Multiple sticky elements on scroll
body: <p>I have <code>header</code> and <code>sidebar</code> div blocks and for our specific needs, I need to make both elements stick at the top once scroll event fires.</p>
  
  <p>Making single element sticky is no problem but if there is more than one, it prevents scroll action and keeps jumping back to the top.</p>
  
  <p>Is there any nice solution to this without using plugins?</p>
  
  <p>Here is my <a href="http://jsfiddle.net/sungsoonz/N4maR/" rel="nofollow">JS Fiddle</a></p>
  
  <p>And, the following is the script which works well with single element.</p>
  
  <pre><code>$(window).on("scroll", function () {
      var fromTop = $(window).scrollTop();
      $(".sidebar").toggleClass("fixed", (fromTop &gt; 50));
      $(".header").toggleClass("fixed", (fromTop &gt; 50));
  });
  </code></pre>