title: Opacity scroll animation for multiple divs
body: <p>I already have a jQuery script I found which changes opacity of my first div from 1 to 0 when I scroll down (or when the div reaches the top).</p>
  
  <p>But now I'd like to have the next divs doing the same when they reach the top of the pages to, not all at the same time.</p>
  
  <p>Here are some parts of the code:</p>
  
  <p>That's the HTML part:</p>
  
  <pre><code>&lt;div id="wrap"&gt;
  
    &lt;section id="logo"&gt;
      &lt;img src="images/layout/logo.png"&gt; 
    &lt;/section&gt; &lt;!-- logo --&gt;
  
    &lt;section id="intro"&gt;  
      &lt;img src="images/layout/welcome.png"&gt;
  
      &lt;p&gt;&lt;h2&gt;Text text text text here here here here&lt;/h2&gt;&lt;/p&gt;
    &lt;/section&gt; &lt;!-- intro --&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Then my jQuery script, currently only working for the logo section.</p>
  
  <pre><code>var divs = $('#logo');
  $(window).on('scroll', function() {
     var st = $(this).scrollTop();
     divs.css({ 'opacity' : (1 - st/100) });
  });
  </code></pre>
  
  <p>To be perfectly clear of what's going on, I leave you the link to my current page:</p>
  
  <p><a href="http://www.hyker.be/opacity" rel="nofollow">www.hyker.be/opacity</a></p>
  
  <p>I simply would like that the "come closer" div do the same that the "logo" one, etc.</p>