Change Slidebar on scrool

I’m now working on the project Build a Product Landing Page and my idea is to copy some landing page, because I terrible with the “design”, In that process I found this template: http://demo.harbourthemes.com/demo/olli/index-1.html which I think is very cool, and I want to replicate, now I’m just working in the navbar, in the effect to change when the scroll down, and this is my progress: https://codepen.io/aasanchez/pen/ERJJKX but I cant find the way how to replicate the transition in the example, the slow slide down of the new color…

Any help?

It looks good to me. It comes down smoothly from toggle.

Was it supposed to do something else instead?