Code to invert text colour in header elements

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.

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

$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