title: Displaying a shadow on the fixed #topbar only if the user scrolled down
body: <p>I have a #top bar in my website. It is always visible at the top and travels with the user as the user scrolls. It works fine. Now I want to display a shadow on the #top bar <strong>only</strong> if the scrollbar position is <strong>> 0</strong>. If the user goes to the top, it must dissapear.</p>
  
  <pre><code>#top {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 80px;
      z-index: 9999;
  }
  #top.shadow {
      -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  }
  </code></pre>
  
  <p><strong>Solution</strong> (based on <a href="https://stackoverflow.com/users/677472/godwin">Godwin</a>'s answer)</p>
  
  <pre><code>$(window).scroll(function(){
      if($(window).scrollTop() &gt; 0) {
          $('#top').addClass('shadow');
      } else {
          $('#top').removeClass('shadow');
      }
  });
  </code></pre>
  
  <p>...but I believe that is not the best way to go -- seems to have a low performance on old computers/browsers. Any ideas?</p>