Website header that only shows when the page scrolls

I’m a bit of a newbie to javascript so I’m wondering if anyone can help please?

I’m trying to make a website header similar to the one on this website – https://therangesestate.com.au/. It only fades in when you scroll down.

Could anyone please tell me how to do this?

Thanks!