Color based different when underlying color is different

Question

Currently I am toying with an idea for a website. And I was wondering if this was possible (it only would have to run on modern browsers). Any JS, CSS, canvas, server supported code is good.

The line with the icon on the right is fixed on it's position, when scrolling it stays put. The content blocks (the purple and white) scroll just like anything on a website.

Now when a part of the line and icon is over the purple content bock, the line color should be white, and when it is over a white content block, it should be gray.

Is this possible? If so, how?

edit: Perhaps unclear, when the icon part is for 50% above the purple block and for 50% above the white block, it should be matching the color there correctly too.

Answer 1

It may solve your problem

 <div clas="mainDiv">
   <div class="greyDiv">
   </div>
   <div class="purpleDiv"></div>
   <div class="contentDiv">
     Here the large text .....
   </div>
</div>

Css:-

   .mainDiv{
    height: 500px;
    border: 1px solid red;
    position: relative;
    overflow:auto;
}
.greyDiv{
    background: #fff;
    color: #ccc;
    height: 250px;
}
.purpleDiv{
    height: 250px;
   background: #956BB3;
   color: #FFF; 
}
.contentDiv{
    height: 500px;
    overflow:auto;
    position: absolute;
    top:0px;

}

Please see :- http://jsfiddle.net/anu1718/DnR7e/