Change colour of site title & nav items for different page sections

I'm currently building a squarespace website which is one long page and utilises anchor links. Within this, I have different sections which are different colours. I want to change the colour of the site title, nav items and footer links, depending which section I'm viewing.

I think this will require Javascript, but if anyone can give me any pointers I'd be very grateful!

Thankyou

Trial site: recorder-octopus-xswk.squarespace.com

Password: calabonita