Looking to create a unique menu concept where it rotates 6 degrees and gradually returns to 0 degrees as users scroll up. Once the menu reaches the top, I want it to stick there.
Is this achievable with Elementor Pro?
Or would it require JS, CSS, and HTML?
window.onscroll = function () {
scrollRotate();
};
function scrollRotate() {
let image = document.getElementById("reload");
image.style.transform = "rotate(" + window.pageYOffset/10 + "deg)";
}
The above code works well, but I need assistance on how to stop the scrollRotate function once the reload element reaches the top.
I aim for my menu to remain fixed at the top upon reaching the top of the page while transitioning from a 6-degree rotation to 0-degrees.