title: Javascript Scroll Animation Issue
body: <p>I attempted to make an animation, so that a header and a paragraph will increase in size when a user has scrolled to it. When the user scrolls past the header, the text will shrink back.</p>
  
  <p>I had an issue getting this to work, but I got it after looking at: <a href="https://stackoverflow.com/questions/17572574/animate-on-scroll-with-jquery">Animate on scroll with jQuery</a></p>
  
  <p>However, the font increases jerkily when I scroll down. Oddly, it works better when I scroll up. </p>
  
  <p>Here is the code:</p>
  
  <pre><code>$(document).ready(function () {
  $(document).on("scroll", onScroll);
  function onScroll(event){
   $('#sched li').each(function () {
          var scrollPos = $(window).scrollTop()+250;
          var currLink = $(this);
          var refElement = currLink.find("div");
          if (refElement.offset().top &lt;= scrollPos &amp;&amp; (refElement.offset().top+refElement.height())&gt;scrollPos){
              currLink.find("h1").stop().animate({fontSize:'40px'},300);
              currLink.find("p").stop().animate({fontSize:'30px'},300);
              currLink.addClass("active");
          }
          else{
          if(currLink.hasClass("active")){
          currLink.find("h1").stop().animate({fontSize:'20px'},300);
          currLink.find("p").stop().animate({fontSize:'15px'},300);
          currLink.removeClass("active");
          }
          }
      });
  }
  });
  </code></pre>
  
  <p>I am somewhat new to this, so any help would be appreciated.</p>