javascript - 底层颜色不同时颜色基础不同

Question

目前我正在考虑一个网站的想法。我想知道这是否可能(它只需要在现代浏览器上运行)。任何 JS、CSS、 Canvas 、服务器支持的代码都很好。

右边带有图标的线固定在它的位置，滚动时它保持原样。内容 block (紫色和白色)像网站上的任何内容一样滚动。

现在，当部分线条和图标位于紫色内容 block 上方时，线条颜色应为白色，而当位于白色内容 block 上方时，应为灰色。

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

编辑:可能不清楚，当图标部分在紫色 block 上方 50% 和白色 block 上方 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/