Highlight navbar li a color based which div is on the screen
<p><strong>JSFIDDLE:</strong> <a href="https://jsfiddle.net/sjhpmzuk/1/" rel="nofollow">https://jsfiddle.net/sjhpmzuk/1/</a></p>

<p>I have a one page scroll website. I've created demo for you (up), so you can understand better. What I want is that, when I scroll through the page, I want to automatically change a color of navigation.</p>

<p>For example, when I will come to this page, <code>.red</code> is on the top, so I want to <code>li:nth-of-type(1) a{color:yellow}</code>. When I scroll through the page, blue will be in point of our interest, so <code>li:nth-of-type(2) a{color:yellow}</code> etc. with all of other fictional divs to footer div (in my example <code>.green</code>), which will work same way.</p>

<p>I found, that BootStrap can do this somehow, but it is too complicated and long code for me. Could please somebody show me how to do it with my example? :)</p>

<p>Thanks for your time!</p>