Header customization

Site URL: https://www.joshuakissi.com/

Hi Everyone,

Firstly can I say I haven't got any experienced with coding but I want to give this a try to liven up my website.

I would like to create a header where the logo is white but when I scroll down it changes to black. At the same time the header is currently transparent but when I scroll down it changes to have a black background. I would like it to stay transparent when I scroll to give the effect like the page elements are moving under the header. Please see website link with the kind of effect I would like to create: 

https://www.joshuakissi.com/

I have also noticed that some of my other pages have a white background so the white logo isn't visible. Would it be possible to use a piece of code to tell the site to use the black logo on these pages? The website I use as an example does something similar also for some of the other pages see link below:

https://www.joshuakissi.com/tonl

If you need to see screenshots of how my site currently looks or the link please let me know and I can send these across.

Thanks in advance for your help!

Hi. Which plan do you use? Personal, Business..?

Hi @tuanphan

I use the Business plan.

We need a link to your site to help.

Hi @rwp,

The site address is: https://dachshund-bat-4d24.squarespace.com/

Whats the password?

@rwp

Password: 12345678