title: Fade out div on scroll
body: <p>I am fading out the div #hero-image when my page scrolls. At the moment, the code below uses a nominal value of 1000 to ensure a slow fade, but my #hero-image div is 100% the height of the browser, so I'd like the full opacity transition from 1 to 0 to happen when the user scrolls the 100% height div out of the initial viewport.</p>
  
  <p>Any help much appreciated!</p>
  
  <pre><code>/* Fade #hero-image on scroll */
  $(document).ready(function(){
      $(window).scroll(function(){
          $("#hero-image").css("opacity", 1 - $(window).scrollTop() / 1000);
      });
  });
  </code></pre>