title: fadeIn fadeOut elements as you scroll up and down
body: <p>What I found so far - and like, and use -  is:</p>
  
  <p>Click <a href="https://stackoverflow.com/questions/15894157/jquery-fade-out-elements-as-they-scroll-off-page-fade-back-as-they-scroll-back">here</a> (previous stackoverflow quest.)</p>
  
  <p>or check out the the edited Demo: (by Jai)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
      //hold box offsets from top
      yArr = new Array();
      for(var i=1; i&lt;$(".box").size(); i++){
          yArr[i] = $('#box' + i).offset().top;
      }    
  
      //checks if box is off screen
      function boxOffScreen(i){
          if ((yArr[i] - $(window).scrollTop()) &lt; 20) return true;
          return false;
      }
      
      //animates box
      function boxAnimate(animateTo, i){
          if(animateTo == "fade"){
              $('#box' + i).stop().fadeTo(100, 0);
          } else{
              $('#box' + i).stop().fadeTo('fast', 1);
          }
      }
      
      //checks if it needs to fade/unfade
      function triggerAnimate(i){
          if (boxOffScreen(i)){
              boxAnimate("fade", i); 
              return;
          }
          boxAnimate("unfade", i);
      }
      
      $(window).scroll(function () {
          for(var i=0; i&lt;$(".box").size(); i++){
              triggerAnimate(i);
          }
      });  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box{
      width: 350px;
      height: 200px;
      background: #8AC9D0;
      margin:50px auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="box1" class="box"&gt;&lt;/div&gt;
  &lt;div id="box2" class="box"&gt;&lt;/div&gt;
  &lt;div id="box3" class="box"&gt;&lt;/div&gt;
  &lt;div id="box4" class="box"&gt;&lt;/div&gt;
  &lt;div id="box5" class="box"&gt;&lt;/div&gt;
  &lt;div id="box6" class="box"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/JdbhV/6/" rel="nofollow noreferrer">Demo</a></p>
  
  <p>But I would like to add fade in and fade out also at the bottom of the page. The goal would be to see like 2 or 3 elements fully and the upcoming element (when you scroll down) or the previous element (when you scroll back up again) fades in smoothly.</p>
  
  <p>Any ideas, any code or hint?</p>
  
  <p>Thanks a lot.</p>