Changing color when specific div is visible : <p>Please tell me how can I make this in the most right way.</p>

<p>HTML:</p>

<pre><code>&lt;div id="fixed-red" class="fixed-red"&gt;&lt;/div&gt;
&lt;div id="fixed-green" class="fixed-green"&gt;&lt;/div&gt;
&lt;div id="fixed-blue" class="fixed-blue"&gt;&lt;/div&gt;
&lt;div id="red" class="red"&gt;&lt;/div&gt;
&lt;div id="green" class="green"&gt;&lt;/div&gt;
&lt;div id="blue" class="blue"&gt;&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>html,body{
  height:100%;
}
.fixed-red,.fixed-green,.fixed-blue{
  width:30px;
  height:30px;
  position:fixed;
  top:10px;
  left:10px;
  background:#333;
}
.fixed-green{
  top:50px;
}
.fixed-blue{
  top:90px;
}
.red-active{
  background:#f00;
}
.green-active{
  background:#0f0;
}
.blue-active{
  background:#00f;
}
.red,.green,.blue{
  width:100%;
  height:100%;
}
.red{
  background:#900;
}
.green{
  background:#090;
}
.blue{
  background:#009;
}
</code></pre>

<p>I want to add/remove <code>red/green/blue-active</code> class to the <code>fixed-red/green/blue</code> divs when the user is on/off the <code>red</code>, <code>green</code>, or <code>blue</code> divs(when they are visible), so the small divs would be respectively highlighted with the color of the big, display divs when the user is on them.</p>

<p>Thanks!</p>
