Make Header Appear On Scroll

I am trying to make the navigation bar transparent when the user lands on the page, then as soon as they scroll the background comes back.

I added this code to make the background transparent :

//transparent navigation on home//
.homepage .header-announcement-bar-wrapper {
    background: transparent !important;
    position: absolute !important;
}

But it is still transparent when scrolling down the page and I want the black background to reappear when the user scrolls

The website is https://timmarner.squarespace.com/
And password is: timmarner123

Can anyone help please?

You can edit Site Header > Enable Fixed Header

When you do this, SS will add a new class name to header, then you can target scroll header - top header easier