title: CSS3 - fixed transparent navigation: Is there a way to color an element depending on the actually visible background of the element?
body: <p>For some project I want to have a transparent fixed navigation of which the color of its contained elements is depending on the current underlying background color. </p>
  
  <p>That means in the simplest case: Depending on scroll - for each element or text within the navigation - if the current visible background is mostly dark then color it white - else color it black.</p>
  
  <p>There is a library which does exactly what i describe for images - <em>have a look at the following example</em>: <a href="http://www.kennethcachia.com/background-check/fixed-nav.html" rel="nofollow noreferrer">http://www.kennethcachia.com/background-check/fixed-nav.html</a></p>
  
  <p>The library is hosted here: <a href="https://github.com/kennethcachia/background-check" rel="nofollow noreferrer">https://github.com/kennethcachia/background-check</a></p>
  
  <p>However it looks like for a navigation which is hovering more than images this is pretty complicated as it is not easy to find the parent element(s) which the navigation element currently hovers.</p>
  
  <p>Is there a way in CSS and/or Javascript/JQuery to color an element depending on its <strong><em>actual visible background</em></strong>?</p>
  
  <p>To illustrate what I mean one more example:</p>
  
  <p>Due to user scroll the menu button currently is on a dark background - so color it white:</p>
  
  <p><a href="https://i.stack.imgur.com/8VdV8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8VdV8.png" alt="fixed menu cover dark"></a></p>
  
  <p>Due to user scroll the menu button currently is on a white background - so color it golden:</p>
  
  <p><a href="https://i.stack.imgur.com/WzvnM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WzvnM.png" alt="fixed menu cover light"></a></p>
  
  <p>The following snippet shows what I would like to achieve - if my fixed nav hovers a white element make it black - if it hovers a black element make it white - if it hovers an image make it depending on the image pixels (this is what i could achieve with the library).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color:blue;
  }
  
  /* If I am on a white or light background, make my color black */
  #menu {
    color:white;
    position:fixed;
  }
  
  #first {
    height:100px;
    background-color:black;
  }
  
  #bar {
    height:100px;
    background-color:white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="menu"&gt;
  I AM THE MENU - make me black if I am on a white background or on a light image
  &lt;/div&gt;
  
  &lt;div id="first"&gt;&lt;/div&gt;
  
  &lt;div id="second"&gt;
    &lt;div id="foo"&gt;
      &lt;div id="bar"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="third"&gt;
    &lt;img src="https://i.stack.imgur.com/mx2yL.jpg" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>