title: Change opacity of DIV when page scroll reaches an anchor
body: <p>I've tried searching but couldn't find an answer. Tried this solution: <a href="https://stackoverflow.com/questions/10555998/change-css-element-with-jquery-when-scroll-reaches-an-anchor-point">Change CSS element with JQuery when scroll reaches an anchor point</a> But doesn't seem to work?</p>
  
  <p>Basically when user scrolls down, and an an anchor point comes into view, to have a DIV under that anchor point begin to change opacity from 0 -> 1</p>
  
  <p>I was trying it in Jsfiddle but it only starts changing opacity once you scroll way past the DIV, not the anchor, not sure what I'm doing wrong</p>
  
  <p><a href="http://www.jsfiddle.net/c4ut7om9/2/" rel="nofollow noreferrer">http://www.jsfiddle.net/c4ut7om9/2/</a></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>var t = $("#trigger").offset().top;
  
  $(document).scroll(function(){
      if($(this).scrollTop() &gt; t)
      {   
     $("#superclass").animate({'opacity':'1'},5500);
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>DIV
  { 
      margin:50px; 
      padding:50px; 
      background-color:lightgreen; 
  }
  
  #superclass
  { 
      margin:50px; 
      padding:50px; 
      background-color:red; 
      height:300px;width:300px;
      opacity:0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div&gt;Hello&lt;/div&gt;
      &lt;div&gt;Hello&lt;/div&gt;
      &lt;div&gt;Hello&lt;/div&gt;
      &lt;div&gt;Hello&lt;/div&gt;
      &lt;div&gt;Hello&lt;/div&gt;
      &lt;div&gt;Hello&lt;/div&gt;
      &lt;a id="trigger"&gt;TRIGGER - once this is in view, the red div should begin changing opacity from 0 to 1 &lt;/a&gt;
      &lt;div id="superclass"&gt;RED DIV&lt;/div&gt;
      &lt;div&gt;Hello&lt;/div&gt;    &lt;div&gt;Hello&lt;/div&gt;    &lt;div&gt;Hello&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks!</p>