Code to invert text colour in header elements

Question:
Wanting to get some code so the elements within my header change colour to black. Initially my header is transparent with White text within the elements and I am looking for this to change to black when it scrolls or is highlighted. i.e the header goes white and the text goes black.

Product:
Wix Studio

What are you trying to achieve:
As above

What have you already tried:
Tried using chatgpt to help me write code and tried searching but was not able to get anything to work.

Additional information:
Here is a website I have seen which is doing exactly what I want: APM Monaco™ | Fashion & Luxury Jewelry from Monaco

https://dcidesigns.wixstudio.io/my-site-25

$w.onReady(function () {
    // When the page scrolls back up and the section leaves the viewport
    $w("#section5").onViewportLeave(() => {
        $w("#text6").hide(); // Hide text6
        $w("#text5").show(); // Show text5
    });

    // When the page scrolls and the section below enters the viewport
    $w("#section5").onViewportEnter(() => {
        $w("#text6").show(); // Show text6
        $w("#text5").hide(); // Hide text5
    });
});