title: Color based different when underlying color is different
body: <p>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. </p>
  
  <p><img src="https://i.stack.imgur.com/L6aq7.gif" alt="Made an .gif to show the idea">
  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. </p>
  
  <p>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. </p>
  
  <p>Is this possible? If so, how?</p>
  
  <p>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.</p>