give button in sticky header a red background when scrolling down

Hi there and thanks in advance for all help

I’m working on a wordpress website and I am using Elementor and Elementor Pro.
I have a button in a sticky header. When people start scrolling down I would like this button to turn red and the text turn white. In a gradual way.

Now I sort of know how to do it but I’m not all sure on everything.

I need to make a class in CSS ie. .changeColor

And call up this change in a Javascript.

I can add the CSS in the custom CSS part of the widget in Elementor. But where do I put the script.js in the rest of the files? WordPress only has .php files I can get into and because I’m working in Elementor, should or can I place it somewhere else?

Also do i put the transition time in the CSS that decribes the button or in the CSS that describes the change?

Many thanks for whoever could make all this a bit clearer for me. THANKS!

Colin

The page I need help with: [log in to see the link]