Q:

CSS3 - fixed transparent navigation: Is there a way to color an element depending on the actually visible background of the element?

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. 
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.
There is a library which does exactly what i describe for images - have a look at the following example: http://www.kennethcachia.com/background-check/fixed-nav.html
The library is hosted here: https://github.com/kennethcachia/background-check
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.
Is there a way in CSS and/or Javascript/JQuery to color an element depending on its actual visible background?
To illustrate what I mean one more example:
Due to user scroll the menu button currently is on a dark background - so color it white:

Due to user scroll the menu button currently is on a white background - so color it golden:

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).

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;
}
<div id="menu">
I AM THE MENU - make me black if I am on a white background or on a light image
</div>

<div id="first"></div>

<div id="second">
  <div id="foo">
    <div id="bar"></div>
  </div>
</div>

<div id="third">
  <img src="https://i.stack.imgur.com/mx2yL.jpg" />
</div>

A:

To do that with script would be quite a performance hog, so I would go with mix-blend-mode and then use a fallback for browsers that doesn't support, i.e. set a semi-transparent background.

body {
  background-color:blue;
}

/* If I am on a white or light background, make my color black */
#menu {
  mix-blend-mode: exclusion;             /*  added  */
  color:white;
  position:fixed;
}

#first {
  height:100px;
  background-color:black;
}

#bar {
  height:100px;
  background-color:white;
}
<div id="menu">
I AM THE MENU
</div>

<div id="first"></div>

<div id="second">
  <div id="foo">
    <div id="bar"></div>
  </div>
</div>

<div id="third">
  <img src="https://i.stack.imgur.com/mx2yL.jpg" />
</div>

