Hello all!
I have been trying to make the SVG files in the header change their colours as I scroll . I believe some posts were relevant but did not work, if anyone could help me fix how to make it work, it would be fantastic!
Thank you all in advance for your help!
const menuItems = {
color: {
black: '#262626',
white: '#FFFFFF',
pink: '#FF00DE'
},
setItemsColor: (color) => {
return {
logo: `<svg preserveAspectRatio="xMidYMid meet" data-bbox="0 0 170.74 24.509" viewBox="0 0 170.74 24.509" height="24.508" width="170.74" xmlns="http://www.w3.org/2000/svg" data-type="color" role="presentation" aria-hidden="true"><defs><style>#comp-lgu7g90u_r_comp-lhil9sry svg [data-color="1"] {fill: ${color};}</style></defs>
<g>
<defs>
<clipPath id="svgcid-td4hbr-vphbs1">
<path fill="${color}" d="M170.74 0v24.508H0V0h170.74z"></path>
</clipPath>
</defs>
<g>
<path fill="${color}" d="m15.708.539-5.586 8.382L4.536.539H0v23.467h4.488V7.171L9.5 14.746h1.194l5.013-7.507v16.767H20.2V.539Z" data-color="1"></path>
<g>
<g clip-path="url(#svgcid-td4hbr-vphbs1)">
<path fill="${color}" d="M46.836 5.522v13.466s-.239 5.521-9.5 5.521c-9.214 0-9.5-5.521-9.5-5.521V5.522S28.12 0 37.335 0c9.263 0 9.5 5.522 9.5 5.522m-4.154.808s0-3.434-5.347-3.434c-5.3 0-5.3 3.434-5.3 3.434v11.883s0 3.232 5.3 3.232c5.347 0 5.347-3.232 5.347-3.232Z" data-color="1"></path>
<path fill="${color}" d="M73.478 5.522v13.466s-.239 5.016-9.5 5.016h-9.5V.539h9.5c9.263 0 9.5 4.983 9.5 4.983m-4.154.808s0-2.828-5.347-2.828h-5.013V20.84h5.014c5.347 0 5.347-2.626 5.347-2.626Z" data-color="1"></path>
<path fill="${color}" d="M99.678.539v23.467h-4.487l-9.5-15.992v15.992h-4.487V.539h4.487l9.5 15.958V.539Z" data-color="1"></path>
<path fill="${color}" d="M125.511 24.006h-4.157l-1.957-6.127h-6.923l-1.764 6.127h-4.2L112.954.539h6.159Zm-6.684-9.258L116.01 3.671l-2.769 11.075Z" data-color="1"></path>
<path fill="${color}" d="M145.216 7.642V6.329s0-3.434-5.347-3.434c-5.3 0-5.3 3.434-5.3 3.434v11.884s0 3.232 5.3 3.232c5.347 0 5.347-3.232 5.347-3.232v-3.467h-6.159v-3.165h10.316v7.407s-.239 5.521-9.5 5.521c-9.214 0-9.5-5.521-9.5-5.521V5.522S130.654 0 139.873 0c9.263 0 9.5 5.522 9.5 5.522v2.12Z" data-color="1"></path>
<path fill="${color}" d="M160.28 3.67v7.911h8.785v3.164h-8.785v6.094h10.46v3.167h-14.943V.538h14.943V3.67Z" data-color="1"></path>
</g>
</g>
</g>
</g>
</svg>`,
menuAbout: `<svg preserveAspectRatio="xMidYMid meet" data-bbox="0.141 -3 47.891 20" viewBox="0 0 54 18" height="18" width="54" xmlns="http://www.w3.org/2000/svg" data-type="ugc" role="presentation" aria-hidden="true">
<g>
<text letter-spacing=".04em" font-weight="500" font-family="AktivGrotesk-Medium, Aktiv Grotesk" font-size="18" fill="${color}" transform="translate(54 13)"><tspan y="0" x="-53.856">About</tspan></text>
</g>
</svg>`,
menuCompany: `<svg preserveAspectRatio="xMidYMid meet" data-bbox="0.313 -2 74.344 20" viewBox="0 0 85 19" height="19" width="85" xmlns="http://www.w3.org/2000/svg" data-type="ugc" role="presentation" aria-hidden="true">
<g>
<text letter-spacing=".04em" font-weight="500" font-family="AktivGrotesk-Medium, Aktiv Grotesk" font-size="18" fill="${color}" transform="translate(85 14)"><tspan y="0" x="-84.672">Company</tspan></text>
</g>
</svg>`,
menuProduct: `<svg preserveAspectRatio="xMidYMid meet" data-bbox="0.813 -3 68.063 20" viewBox="0 0 82 18" height="18" width="82" xmlns="http://www.w3.org/2000/svg" data-type="ugc" role="presentation" aria-hidden="true">
<g>
<text letter-spacing=".04em" font-weight="500" font-family="AktivGrotesk-Medium, Aktiv Grotesk" font-size="18" fill="${color}" transform="translate(82 13)"><tspan y="0" x="-81.18">Products</tspan></text>
</g>
</svg>`,
menuContact: `<svg preserveAspectRatio="xMidYMid meet" data-bbox="0.328 -2 60.344 20" viewBox="0 0 72 19" height="19" width="72" xmlns="http://www.w3.org/2000/svg" data-type="ugc" role="presentation" aria-hidden="true">
<g>
<text letter-spacing=".04em" font-weight="500" font-family="AktivGrotesk-Medium, Aktiv Grotesk" font-size="18" fill="${color}" transform="translate(72 14)"><tspan y="0" x="-71.658">Contact</tspan></text>
</g>
</svg>`
}
}
}
$w.onReady(function () {
});
/**
* Adds an event handler that runs when an element is no longer
displayed in the viewable part of the current window.
[Read more](https://www.wix.com/corvid/reference/$w.ViewportMixin.html#onViewportLeave)
* @param {$w.Event} event
*/
export function section1_viewportLeave(event) {
$w('#logo').src = menuItems.setItemsColor(menuItems.color.black);
}