title: Fade In and Out on scroll using CSS opacity and Javascript
body: <p>I have a div element that I would like to have fade in a certain scroll point, but instead of using (slow) or (fast) properties I have used the CSS opacity, that way it will still be visible while you scroll and change opacities as you go up and down the page. This is used in the top logo and works perfect, but for some reason I cannot find a solution to use it again on the second logo. You can see it in use on my site so far here:
  <a href="http://abezieleniec.com/SIDWeb" rel="nofollow">http://abezieleniec.com/SIDWeb</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="jumbotronsecond"&gt;
    &lt;div class="container"&gt;
      &lt;div class="biglogo2"&gt;
        &lt;img src="images/biglogofull.png"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.biglogo2 {
  width:80%;
  display:block;
  margin-left:auto;
  margin-right:auto;
  margin-top:130px;
  margin-bottom:130px;
  opacity:1;
  }
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>$(function(){
      var fadeBegin = 500, 
      fadeFinish = 800, 
      fadingElement = $('.biglogo2');
  
      $(window).bind('scroll', function(){
         var offset = $(document).scrollTop(), opacity = 0; 
          if( offset &lt;= fadeBegin ){
             opacity = 1; 
         } else if( offset &lt;= fadeFinish ){
             opacity = 1 - offset / fadeFinish;
         }
       fadingElement.css('opacity',opacity);
      });
  </code></pre>