Change colour of fixed text based on underlaying colours
<p>I have a fixed menu that scrolls on top of both light and dark backgrounds.</p>

<p>If the text is white it becomes invisible when on top of white elements. I would like to find a way where the color of the text changes dynamically as I scroll on the page.</p>

<p>My menu:</p>

<pre><code>&lt;div class="nav-wrapper footer-wrapper"&gt;
&lt;nav&gt;
    &lt;div class="column"&gt;
    &lt;a href="#" class="prev-section"&gt;Previous&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="column links"&gt;
    &lt;a href="#" class="next-section"&gt;Next&lt;/a&gt;
    &lt;/div&gt;
&lt;/nav&gt;
</code></pre>

<p></p>

<p>A working JSFiddle: <a href="https://jsfiddle.net/ua06Lbwk/5/" rel="nofollow">https://jsfiddle.net/ua06Lbwk/5/</a></p>

<p>Any ideas?</p>