Change the ELEMENTS COLOR in the HEADER when scrolling

Ask the community
,
19

Hmmm not exactly.
First of all you need to know what is the SVG code of the Hamburger menu (you take it from the Live site).
Then you need to slightly update the code so that the function returns an object with 2 elements .
One for the logo and one for the hamburger menu .

  • It is important that you try to understand what the code does to be able to make changes in the future.

Anyway, I did it for you:

const menuItems = {
    color: {
        black: '#000000',
        white: '#ffffff',
        pink: '#ff00de'
 },
    setItemsColor: (color) => {
 return {
            logo: `<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>`,
            hamburgerMenu: `<svg preserveAspectRatio="xMidYMid meet" data-bbox="33.5 63.7 133.5 67.1" viewBox="33.5 63.7 133.5 67.1" height="200" width="200" xmlns="http://www.w3.org/2000/svg" data-type="color" role="img" aria-labelledby="svgcid-eviibxipg1ow"><defs><style>#comp-klkbrlyy2_r_comp-k9wga0tn svg [data-color="1"] {fill: #262626;}</style></defs><title id="svgcid-eviibxipg1ow">Open site navigation</title>
                                <g>
                                    <path fill="${color}" d="M166.3 63.7v5H33.5v-5h132.8z" data-color="1"></path>
                                    <path fill="${color}" d="M167 94.4v5H34.2v-5H167z" data-color="1"></path>
                                    <path fill="${color}" d="M167 125.8v5h-60v-5h60z" data-color="1"></path>
                                </g>
                            </svg>`
 }
 }
}

$w.onReady(function () {

});

export function line1_viewportEnter(event) {
    animateMenuElements(menuItems.color.white)
}

async function animateMenuElements(color) {
    $w('#logo').src = menuItems.setItemsColor(color).logo;
    $w('#hamburgerMenu').src = menuItems.setItemsColor(color).hamburgerMenu;
}