How to change menu navigation text color when scrolling above specific sections

Hello, 

I am building up my website with an Index page on Squarespace 7.1 with different videos on each section. 

I have a fixed transparent header, with the navigation links in white, but for certain sections the visibility of reading is hard. 

I would like to know how can I change the text color of these navigation links, cart, social icon and logo color when scrolling above specific sections? 

Also, I am using a lot of videos on the same page, which can be hard to load depending on the user wifi. Is there any way I can code to switch the videos for an image when there is not a good internet signal? 

I appreciate your help!

Thank you!