title: Animate position of div on scroll position
body: <p>What's the best way to animate the position of a div on scroll position? Essentially, when you reach a certain point on the page... a fixed element will animate up.</p>
  
  <p>I have included below what I currently have... but it's a little slow and seems to slide up... slowly... half way... then complete. Any thoughts?</p>
  
  <pre><code>var shareHeight = $('.related-share-container').height();
  $('.related-share-container').css('bottom',-shareHeight);
  $(window).scroll(function() {   
       if ($(window).scrollTop() + $(window).height() &gt; $(document).height() - 150) {
          $('.related-share-container').stop().animate({ bottom: 0 }, 500);
       } else {
           $('.related-share-container').stop().animate({ bottom: -shareHeight }, 500);
       }
  });
  </code></pre>
  
  <p><strong>UPDATE FOR REWARD</strong></p>
  
  <p>This is the dev site I am working on: <a href="http://goo.gl/KcFdE6" rel="nofollow">http://goo.gl/KcFdE6</a> and as you can see, if you scroll to the bottom and stop, it slides up fairly well, BUT, if you keep scrolling... it's interacting with the animation and you can a really jumpy/slow transition. Any ideas?</p>