当底层颜色不同时，颜色基础不同

Question

目前我正在寻找网站的想法。我想知道这是否可行（它只能在现代浏览器上运行）。任何JS，CSS，canvas，服务器支持的代码都很好。

右侧图标的行固定在它的位置，滚动时保持不变。内容块（紫色和白色）滚动就像网站上的任何内容一样。

现在当线条和图标的一部分在紫色内容块上时，线条颜色应为白色，当它在白色内容块上时，它应该是灰色的。

这可能吗？如果是这样，怎么样？

编辑：也许不清楚，当图标部分比紫色块高50％并且白色块高出50％时，它也应该正确匹配那里的颜色。

Answer 1

它可以解决您的问题

 <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;

}

请参阅： - http://jsfiddle.net/anu1718/DnR7e/