title: Change Progress Bar Value based on Scrolling
body: <p>I would like to be able to make my progress bar increase, based on how far I've scrolled and how much is left.</p>
  
  <p>I've tried this: <a href="http://jsfiddle.net/hakarune/PvVdq/57/" rel="nofollow noreferrer">jsFiddle</a> and it doesn't seem to work, I based my script off someone's script that made a block move horizontally based on scroll %.</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;progress id="progressbar" value="0" max="100"&gt;&lt;/progress&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  Lorem&lt;br /&gt;
  Ipsum&lt;br /&gt;
  Dolor&lt;br /&gt;
  .
  .
  .
  .
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function () {
      $(window).scroll(function () {
          var s = $(this).scrollTop(),
              d = $(document).height(),
              scrollPercent = (s / d);
          var position = (scrollPercent);
          $("#progressbar").progressbar('value', position);
      });
  });
  </code></pre>