How to pull off the transparent-to-fill top bar effect?

[jdfweb]

Hello!

Just wondering how I could pull off this effect on the FoundationPress theme, live link: https://ironsummitmedia.github.io/startbootstrap-grayscale/

The above is a Bootstrap html template - however I'd love to pull this off in Foundation. How would I go about doing this? Basically transparent navigation on top of image - when you scroll down, the navigation has a seamless transition to a filled color background.

Any help is appreciated.

[ghost]

@jdfweb, i made a quick test with techniques used in a grayscale theme you refer to.
Demo here: /removed/
This is for further development and adjustments only, not production-ready.

Basically, you can just animate the looks of .top-bar-container with css transitions, and trig those animations with a few lines of jQuery.

Can do? Need code?