How To Achieve Dynamic Curved Corners in Header Navigation with Scroll Visibility and Mobile Responsiveness

Hi there! I am currently troubleshooting a way to create curved corners on my header navigation. I'd like it to be a dynamic navigation where it's visible when you scroll up but clear when you are on the page. Also to remove it on mobile.  

Here is an example of what I am looking to create: https://www.rhodeskin.com/

Any help with this will mean a lot! I've been trying to find a solution for this for ages!
Thank you!