title: Implementing Scrolling progress bar for more than one element
body: <p>I'm trying to implement the scrolling progress bar. (The bar that'll tell the user about How much of an article within an <code>div</code> (s)he has read).</p>
  
  <p>Something like implemented on <a href="http://www.webdesigncrowd.com/demo/scrolling-progress-bar-6.23.14/?scid=social29424356" rel="nofollow">this</a> site.</p>
  
  <p>I've Designed my custom bar and coded it on <a href="http://jsfiddle.net/Vedant_Terkar/kzx0z831/1/" rel="nofollow"><code>fiddle</code></a>. It works fine you can see it.</p>
  
  <p>Here is code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;div id="xyz"&gt;
      Hello !!&lt;br /&gt;
      XYZ&lt;br /&gt;
      Hello !!&lt;br /&gt;
      XYZ&lt;br /&gt;
      Hello !!&lt;br /&gt;
      XYZ&lt;br /&gt;
      Hello !!&lt;br /&gt;
      XYZ&lt;br /&gt;
      Hello !!&lt;br /&gt;
      XYZ&lt;br /&gt;
      Hello !!&lt;br /&gt;
      XYZ&lt;br /&gt;
      Hello !!&lt;br /&gt;
      XYZ&lt;br /&gt;
      Hello !!&lt;br /&gt;
      XYZ&lt;br /&gt;
  &lt;/div&gt;
  &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;div id="xyzprog"&gt;&lt;div id="prog"&gt;Intro&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JQuery/JS:</p>
  
  <pre><code>$(function(){
      $(window).scroll(function(){
      var elemTop=$("#xyz").offset().top,elemHeight=$("#xyz").height();
          var total=elemTop+elemHeight;
          var scTop=$(window).scrollTop();
              var prog=((scTop-elemTop)/elemHeight)*100;
          var html="Intro;Read=";
              if(prog&gt;100){ prog=100; html="Intro;Read=" }
          if(prog&lt;0){ prog=0; }
              $("#prog").animate({
                  "width":""+prog+"%"
              },1).html(html+""+prog+"%");
  
      });
  });
  </code></pre>
  
  <p>CSS is irrelevant so not posting it.</p>
  
  <p>Now what I want is: </p>
  
  <ul>
  <li><p>Is there any way to make this code work for more than one element (say 10 minimum)?</p></li>
  <li><p>Can anyone design a plugin that will work like say <code>$(elem).scrollProgress()</code> and how? I'm really eager to design one but don't know how to start :(.</p></li>
  <li><p>Is there any better way to do it?</p></li>
  </ul>
  
  <p>Any advice, idea, thoughts are greatly appreciated! </p>
  
  <p>Thanks in advance :).</p>