title: Adding/Removing Class to h1 tags via scrolling
body: <p>I've been looking for ways to add/remove classes via scrolling, and have found several close examples, but nothing that I can seem to use with the site I'm working on.</p>
  
  <p>I know there's quite a few threads on here that ask a similar question, but the solutions I find don't work the way I need them to.</p>
  
  <p>Side note: I'm pretty new to jQuery, so maybe I'm missing something small?</p>
  
  <p>So I have a single page site, responsive, fixed header, and when you click a nav link you're then smooth-scrolled down (using CSS) to the anchor you clicked on. Pretty simple.</p>
  
  <p>Now, there's a CSS animation, that takes place when you click on any of the nav links in the header, that gets applied to an <code>h1</code> tag. For example, you click 'intro' (I have a class of '1' just so I can select it), get scrolled down, and now see an animation on the word 'INTRO' in the content.</p>
  
  <pre><code>$('.intro').click(function(){
          setTimeout(function(){
          $('.1').addClass('txt_anim');
              },1000);
          setTimeout(function(){
          $('.1').removeClass('txt_anim');
              },11000);
      });
  
  
  
  
  &lt;h1 class="1"&gt;intro&lt;/h1&gt;
  </code></pre>
  
  <p>Again, simple. I can accomplish the animation happening on all of the necessary headings this way, but the user MUST click on the anchors to see the animation.</p>
  
  <p>So, now I need this animation to be applied when the user is scrolling.
  Many of the solutions I found are a series of <code>if/else</code> statements that depend upon how far down the user has scroll, that use <code>scrollTop()</code></p>
  
  <p>This example uses a variable they defined called <code>scroll</code>.</p>
  
  <pre><code>if (scroll &lt;= 500) {
          $("#m1").addClass("active");
      }
  </code></pre>
  
  <p>The problem with this solution: with this site being responsive, depending on how wide you have your browser, or the width of someones device, the content of the site is squished in and pushed down, and makes the site longer. So there's a good chance an animation can get applied to a heading without the user even seeing it on their screen.</p>
  
  <p>I asked a co-worker if they might have a solution, he did some digging and found this <a href="http://jsfiddle.net/cse_tushar/Dxtyu/141/" rel="nofollow">jsfiddle</a> and said I should try something similar to this code they used:</p>
  
  <pre><code>function onScroll(event){
  var scrollPos = $(document).scrollTop();
  $('#menu-center a').each(function () {
      var currLink = $(this);
      var refElement = $(currLink.attr("href"));
      if (refElement.position().top &lt;= scrollPos &amp;&amp; refElement.position().top + refElement.height() &gt; scrollPos) {
          $('#menu-center ul li a').removeClass("active");
          currLink.addClass("active");
      }
      else{
          currLink.removeClass("active");
      }
  });
  }
  </code></pre>
  
  <p>I've been picking at it for a long while now, and I can't get any results... Again, pretty new to this jQuery stuff.</p>
  
  <p>I guess what I'm asking is: Is there a way to tell the browser "Hey, when this heading gets about "this-far-away" from the top (like a certain amount of pixels or percent between the top of the document and the top of the element), apply this class", opposed to "Apply this class when the user scrolls "this-much"." </p>