title: Dots change on scroll
body: <p>I have this script: <a href="http://jsfiddle.net/8cj7C/" rel="nofollow">http://jsfiddle.net/8cj7C/</a></p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div id="scroll"&gt;
  &lt;div id="1" class="scroll_item"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div id="2" class="scroll_item"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div id="3" class="scroll_item"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div id="4" class="scroll_item"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="first"&gt;&lt;/div&gt;
  &lt;div id="second"&gt;&lt;/div&gt;
  &lt;div id="third"&gt;&lt;/div&gt;
  &lt;div id="fourth"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>What I need to do is when I scroll for example to the second div using the scrollbar (not the scroll dots), the second dot will change to class <code>scroll_item_active</code>. I need help to do this!</p>
  
  <p>I've been trying to do something with scrollTop and set 800, 1600, etc, but it's not working. Any good idea?</p>