title: Div opacity based on scrollbar position
body: <p>Find an example of how to fade out a <code>div</code> when the scroll bar reaches a certain position <a href="http://jsfiddle.net/xXxXR/" rel="nofollow noreferrer">here</a>. But it's not a smooth throttle-type fade. Here is the code from that jsfiddle:</p>
  
  <pre><code>var divs = $('.social, .title');
  $(window).scroll(function(){
     if($(window).scrollTop()&lt;10){
           divs.fadeIn("fast");
     } else {
           divs.fadeOut("fast");
     }
  });​
  </code></pre>
  
  <p>I want the opacity percentage to to reflect the position of the scrollbar. For instance when the scroll bar is at very top position, the div opacity is 100%.  When I scroll down 35px I want the opacity of the div to fade down to 0%</p>
  
  <p>Perhaps a technique could be when div A is at 35px from top, div B = 100% opacity.  When div A is 0px from top, div B = 0% opacity.  And have it smoothly fade at all stages in between.</p>
  
  <p>Thanks!</p>
  
  <p>UPDATE:  Thanks for all the help most of them work fairly well, but I really need it to work within the 35px range.  So I have created a new example which will make it very clear how it should work.<br>
  <a href="http://jsfiddle.net/J8XaX/1/" rel="nofollow noreferrer">http://jsfiddle.net/J8XaX/1/</a></p>
  
  <p>UPDATE 2: mobile devices:  I tried this on my iPhone and the fade doesn't work smoothly.  The way it works is if you slide halfway and release your finger, then the opacity goes down.  But if you try to scroll smoothly it goes from 100% opacity directly to 0% opacity.  Wondering if there is any way to fix this??</p>
  
  <p>Thanks!!</p>