Create a nav bar scroll effect with a animation page already done

Hello

I just made an animation for my web design and I want to know how to add a navigation bar that appear in the top of the page and when scrolling get it fixed in the top all the time.

I have to precise that I have 2 diferent nav bars, the default when it’s the top when the page apperas and a second one with a background and a shadow below (this one I want to get when scrolling).

I tried many things with the help of youtube videos but didn’t get it exactly as I want.

Thanks