title: How to make element fade in on page scroll?
body: <p>I have the following element in my page:</p>
  
  <pre><code>&lt;div id="banner" class="disappear"&gt;Hello&lt;/div&gt;
  </code></pre>
  
  <p>The CSS for this element is:</p>
  
  <pre><code>#banner {position:fixed;}
  .disappear {opacity:0;}
  .appear {opacity:1;}`
  </code></pre>
  
  <p>I'd like to know how to change the class from <code>.disappear</code> to <code>.appear</code> with jQuery when the page scrolls to a certain point, and then back to <code>.disappear</code> when the page returns to original position.</p>