how to make "onScroll" stops at a point-CodePudding

I want to make a menu which is 6 deg rotated and it will get to 0 deg as it reaches to top as users scrolls and then when it is on top i want to make it stick at top

is it possible to do it in elementor pro?

or with the help of JS CSS Html?

windows.onscroll = function () {
    scrollRotate();
};

function scrollRotate() {
    let image = document.getElementById("reload");
    image.style.transform = "rotate("   window.pageYOffset/10   "deg)";
}

the above code is working fine, but i want to stop scrollRotate function when the reload element reaches to the top.

I want my menu to stick on top as it get to the top with scoll. But at same time i want it to gets from 6 deg rotated to 0deg rotate

CodePudding user response：

To make an onScroll event stop at a certain point, you can use the scrollTop property to determine the current position of the scrollbar, and then use the preventDefault() method to prevent the scroll event from continuing if the scrollbar reaches the desired position.

For example, if you have an onScroll event handler attached to a container element, you can use the following code to stop the scroll event when the scrollbar reaches a certain point:

function onScroll(event) {
  const container = event.target;
  const position = container.scrollTop;
  if (position >= 200) {
    event.preventDefault();
  }
}

In this code, the onScroll() function is the event handler for the scroll event. It uses the scrollTop property to get the current position of the scrollbar and then checks if the position is greater than or equal to 200. If it is, the preventDefault() method is called to prevent the scroll event from continuing.

Note that the preventDefault() method only prevents the default behavior of the scroll event. It does not stop the scrolling completely, so the user may still be able to scroll the container using other methods, such as using the keyboard or the mouse wheel. To completely stop the scrolling at a certain point, you may need to use additional techniques, such as disabling the scrollbar or using JavaScript to prevent the user from scrolling past the desired position.

CodePudding user response：

You might wanna look into the Animate on scroll (AOS) javascript library. It is really handy and quite easy to understand. Instead of creating your own calculations.

Link