Nav bar div change opacity on scroll

Hi all,

Im basically trying to achieve this. There is a div behind the navbar that has a blur and opacity effect that is transparent on load and fades up on scroll and then back down on scroll back to the top of the screen

Here is my site Read-Only: LINK
(how to share your site Read-Only link)