title: How to add class to an element if another div width reach its position
body: <p>I am stuck in something and need your help, i have been trying to figure out a <code>javascript</code> function but i am unable to get it with easy and light weight formula for a <code>cms</code> use.</p>
  
  <p>I have a progress bar of the song. and below the progress bar there is a strip which contains images and those images have a hover effect as well, i want if the above progress reaches to anyone the image position in the below strip it ads and active class to the image and removes the class right after it passes the end of the image. Please check fiddle for working player.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#containment-wrapper2 {
    width: 100%;
    height: 30px;
    background: #aaa;
  }
  
  #progress {
    background: #000;
    height: 30px;
  }
  
  #containment-wrapper {
    width: 100%;
    height: 30px;
    background: #eee;
  }
  
  .comment {
    background: #000;
    position: absolute;
  }
  
  .comment:hover,
  .comment.active {
    background: red;
    transform: scale(1.5);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="containment-wrapper2"&gt;
    &lt;div id="progress" style="width:41.2%;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div id="containment-wrapper" style="width:100%; height:30px; background:#eee;"&gt;
  
    &lt;img id="coment1" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style=" left:46.3%;" /&gt;
    &lt;img id="coment2" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:26.3%;;" /&gt;
    &lt;img id="coment3" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:36.3%;" /&gt;
    &lt;img id="coment4" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:51%;" /&gt;
    &lt;img id="coment4" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:51.6%;" /&gt;
    &lt;img id="coment5" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:38%;" /&gt;
    &lt;img id="coment6" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:21%;" /&gt;
    &lt;img id="coment7" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:6.3%;" /&gt;
    &lt;img id="coment8" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:12.6%;" /&gt;
    &lt;img id="coment9" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:90%;" /&gt;
    &lt;img id="coment10" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:70%;" /&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>i am seeking something like soundcloud does on its comments system.</p>
  
  <p>I am really stuck in this, and seeking for a light weight and simple solution that can work dymanically because comment id's will be coming from database and i wont be able write manual id's to any js function.</p>
  
  <p>I want when this class "jp-play-bar" reach the start of the image in the bottom it ads class "active" to the image and as it reaches the end of the image it removes the active class</p>
  
  <p>Thanks in advance</p>
  
  <p>here is a <strong><a href="http://jsfiddle.net/XLNCY/22623/" rel="nofollow noreferrer">fiddle</a></strong></p>