Hamberger Menu Icon Rotate 360 degree when you scrolled page down or up

Ask the community
, ,
1

Question:
How I can rotate uploaded Hamberger Menu Icon When I scrolled page up and down?

I am trying to create add a scroll effect of Menu Icon by wix studio but it is not working.
Need also icon menu position fixed when scrolled up and down the screen?
My custom Code:
import wixWindow from ‘wix-window’;

$w.onReady(function () {
wixWindow.getBoundingRect()
.then(() => {
// Start the scroll listener
wixWindow.scroll.onScroll(() => {
const scrollY = wixWindow.scroll.scrollY;
const scrollHeight = wixWindow.scroll.scrollHeight;
const viewportHeight = wixWindow.scroll.viewportHeight;

            const scrollRatio = scrollY / (scrollHeight - viewportHeight);
            const rotateAngle = scrollRatio * 360;

            $w("#rotatingIcon").style.transform = `rotate(${rotateAngle}deg)`;
        });
    });

});

2

Please use the correct formatting of code so it is easier for us all to read

Recording 2025-06-04 080848

Like this

import wixWindow from ‘wix-window’;

$w.onReady(function () {
wixWindow.getBoundingRect()
.then(() => {
// Start the scroll listener
wixWindow.scroll.onScroll(() => {
const scrollY = wixWindow.scroll.scrollY;
const scrollHeight = wixWindow.scroll.scrollHeight;
const viewportHeight = wixWindow.scroll.viewportHeight;

            const scrollRatio = scrollY / (scrollHeight - viewportHeight);
            const rotateAngle = scrollRatio * 360;

            $w("#rotatingIcon").style.transform = `rotate(${rotateAngle}deg)`;
        });
    });
});

…in saying that I think you will need to build a custom menu to achieve what you are after.