Change the ELEMENTS COLOR in the HEADER when scrolling

Ask the community
,
17

You have an unnecessary comma after the setItemsColor function.
This causes an error and then the code does not work.

Also, section5_viewportLeave ( Event ) need to be event .

Copy paste this code:

// API Reference: https://www.wix.com/velo/reference/api-overview/introduction

const menuItems = {
    color: {
        black: '#000000',
        white: '#ffffff',
        pink: '#ff00de'
 },
    setItemsColor: (color) => {
 return `<svg preserveAspectRatio="xMidYMid meet" data-bbox="30.62 46.55 401.273 61.6" viewBox="30.62 46.55 401.273 61.6" xmlns="http://www.w3.org/2000/svg" data-type="shape" role="img" aria-labelledby="svgcid-e4bq10-81csh4"><title id="svgcid-e4bq10-81csh4"></title>
    <g>
        <path fill="${color}" d="M62.35 57.18a18 18 0 0 1 7 7 20.8 20.8 0 0 1 2.55 10.41 21 21 0 0 1-2.55 10.46 17.87 17.87 0 0 1-7 7 20.69 20.69 0 0 1-10.17 2.47q-7.86 0-12.45-5.24v18.87h-9.11v-53h8.67v5.1a14.06 14.06 0 0 1 5.57-4.15 18.87 18.87 0 0 1 7.32-1.38 20.69 20.69 0 0 1 10.17 2.46zm-2.92 26.23a12.14 12.14 0 0 0 3.24-8.82 12.13 12.13 0 0 0-3.24-8.81 11 11 0 0 0-8.27-3.35 11.78 11.78 0 0 0-5.9 1.49 10.84 10.84 0 0 0-4.15 4.26 14.21 14.21 0 0 0 0 12.83 10.84 10.84 0 0 0 4.15 4.26 11.78 11.78 0 0 0 5.9 1.49 11 11 0 0 0 8.27-3.35z"></path>
        <path fill="${color}" d="M118.26 55.14v38.91h-8.67v-5a14.53 14.53 0 0 1-5.47 4 17.66 17.66 0 0 1-7.06 1.41q-7.8 0-12.28-4.33T80.3 77.36V55.14h9.11v21q0 5.25 2.37 7.84a8.67 8.67 0 0 0 6.74 2.58 10.2 10.2 0 0 0 7.75-3q2.88-3 2.88-8.71V55.14z"></path>
        <path fill="${color}" d="M164.08 59q4.44 4.3 4.45 12.75v22.3h-9.11V72.92q0-5.1-2.41-7.69a8.88 8.88 0 0 0-6.84-2.58 10.53 10.53 0 0 0-7.94 3q-2.92 3-2.92 8.71v19.69h-9.1V55.14h8.66v5a14.19 14.19 0 0 1 5.69-4.08 20.47 20.47 0 0 1 7.72-1.38q7.35.03 11.8 4.32z"></path>
        <path fill="${color}" d="M187.46 92a18.75 18.75 0 0 1-7.46-7.1 21 21 0 0 1 0-20.58 18.89 18.89 0 0 1 7.47-7.06 22.74 22.74 0 0 1 10.89-2.55A20.91 20.91 0 0 1 208.41 57a15.13 15.13 0 0 1 6.52 6.7l-7 4.08a11.15 11.15 0 0 0-4.19-4 12.22 12.22 0 0 0-13.95 2 11.87 11.87 0 0 0-3.36 8.85 12 12 0 0 0 3.32 8.86 12.29 12.29 0 0 0 14 2 11.15 11.15 0 0 0 4.19-4l7 4.08a15.87 15.87 0 0 1-6.59 6.74 20.55 20.55 0 0 1-10 2.36A22.84 22.84 0 0 1 187.46 92z"></path>
        <path fill="${color}" d="M246.69 91.93a10.7 10.7 0 0 1-3.9 2 17.41 17.41 0 0 1-4.84.65q-6.42 0-9.91-3.35t-3.5-9.76V62.72h-6.41v-7.29h6.41v-8.88h9.11v8.88h10.42v7.29h-10.42v18.5a6.18 6.18 0 0 0 1.35 4.34 5.23 5.23 0 0 0 4 1.49 8 8 0 0 0 5.1-1.6z"></path>
        <path fill="${color}" d="M291.86 55.14v38.91h-8.67v-5a14.53 14.53 0 0 1-5.47 4 17.66 17.66 0 0 1-7.06 1.41q-7.8 0-12.28-4.33t-4.48-12.77V55.14h9.1v21q0 5.25 2.37 7.84a8.66 8.66 0 0 0 6.73 2.58 10.22 10.22 0 0 0 7.76-3q2.88-3 2.88-8.71V55.14z"></path>
        <path fill="${color}" d="M331.82 58.82q4.55 4.13 4.55 12.42v22.81h-8.6v-4.74a10.64 10.64 0 0 1-4.77 3.9 18.61 18.61 0 0 1-7.47 1.34 18.26 18.26 0 0 1-7.65-1.49 11.82 11.82 0 0 1-5.06-4.15 10.54 10.54 0 0 1-1.78-6 10.31 10.31 0 0 1 3.89-8.42q3.9-3.17 12.28-3.16h10.05v-.59a8 8 0 0 0-2.44-6.26c-1.63-1.46-4-2.19-7.25-2.19a20.89 20.89 0 0 0-6.44 1 15.9 15.9 0 0 0-5.36 2.84l-3.57-6.63a22.24 22.24 0 0 1 7.36-3.57 32.92 32.92 0 0 1 9.11-1.23q8.6.01 13.15 4.12zm-8.31 27.54a8.53 8.53 0 0 0 3.75-4.48v-4.52h-9.39q-7.87 0-7.87 5.17a4.64 4.64 0 0 0 2 3.94 9.07 9.07 0 0 0 5.47 1.46 11.79 11.79 0 0 0 6.04-1.57z"></path>
        <path fill="${color}" d="M371.41 91.93a10.7 10.7 0 0 1-3.9 2 17.41 17.41 0 0 1-4.84.65q-6.42 0-9.91-3.35t-3.5-9.76V62.72h-6.41v-7.29h6.41v-8.88h9.11v8.88h10.42v7.29h-10.42v18.5a6.18 6.18 0 0 0 1.38 4.34 5.21 5.21 0 0 0 4 1.49 8 8 0 0 0 5.1-1.6z"></path>
        <path fill="${color}" d="M414 77.51h-30.5a10.62 10.62 0 0 0 4.19 6.81 13.7 13.7 0 0 0 8.42 2.51 14.16 14.16 0 0 0 10.56-4.22l4.88 5.61a16.36 16.36 0 0 1-6.63 4.78 26.35 26.35 0 0 1-20.33-1 18.33 18.33 0 0 1-7.53-7.11 20 20 0 0 1-2.66-10.31 20.38 20.38 0 0 1 2.6-10.22 18.36 18.36 0 0 1 7.18-7.1 20.94 20.94 0 0 1 10.34-2.55 20.33 20.33 0 0 1 10.16 2.51 17.77 17.77 0 0 1 7 7.07 21.45 21.45 0 0 1 2.51 10.52c-.02.63-.07 1.53-.19 2.7zm-26.89-12.93a10.87 10.87 0 0 0-3.68 6.88h22.07a10.77 10.77 0 0 0-3.57-6.85 11.84 11.84 0 0 0-14.82 0z"></path>
        <path fill="${color}" d="M421.6 92.84a6.07 6.07 0 1 1 4.23 1.71 5.82 5.82 0 0 1-4.23-1.71z"></path>
    </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.
*    @param {$w.Event} event
*/
export function section5_viewportLeave(event) {
    $w('#logo').src = menuItems.setItemsColor(menuItems.color.white);
}