title: followTo issue with higher resolutions
body: <p>I use this snippet to make an element "stop" at a certain point when scrolling.</p>
  
  <pre><code>$.fn.followTo = function (pos) {
      var $this = this,
          $window = $(window);
  
      $window.scroll(function (e) {
          if ($window.scrollTop() &gt; pos) {
              $this.css({
                  position: 'absolute',
                  top: pos
              });
          } else {
              $this.css({
                  position: 'fixed',
                  top: 0
              });
          }
      });
  };
  
  $('#braille').followTo(865);
  </code></pre>
  
  <p>The problem is that if there's not enough space to scroll (in higher resolutions), it's not positioned correctly.</p>
  
  <p>It's important that you watch these 2 videos to understand how it works.</p>
  
  <p><strong>1920x1080:</strong> <a href="https://www.youtube.com/watch?v=WjT8FKAKTxA" rel="nofollow">https://www.youtube.com/watch?v=WjT8FKAKTxA</a>
  It's properly positioned.</p>
  
  <p><strong>2775x1514:</strong> <a href="https://www.youtube.com/watch?v=oqQXm8BsfYA" rel="nofollow">https://www.youtube.com/watch?v=oqQXm8BsfYA</a>
  Here instead as you can see it's not in the right place because there's not enough space to scroll</p>
  
  <p>Resolutions until about <code>1190px</code> height are ok, with higher resolutions there's this problem.</p>
  
  <p>How can I solve this..? Can I set a followTo starting from the bottom of the page? Or set it in percentage? Or say "if height is > than 1190 just put that there"....</p>
  
  <p><strong><a href="http://luca-longobardi.com/index_prima.html" rel="nofollow">Here</a></strong> is the live webpage. To see what I'm talking about just zoom out like 3 times the resolution of your browser and try to scroll the page. The braille image isn't positioned properly under the music staff and above the yellow paragraph.</p>