Custom code causes an object to change position

Hey everyone!

What I’m trying to do:
I’d like to make the compass icon rotate following the cursor (aim at the cursor).
I was looking for a solution inside the interactions in webflow but couldn’t find the perfect interaction combo.
With the help of chatGPT I used the custom code that does exactly what I want (hooray!).

<script>

document.addEventListener('DOMContentLoaded', function () {
  const rotatingObject = document.getElementById('compass');
  const rect = rotatingObject.getBoundingClientRect();
  const elementX = rect.left + rect.width / 2;
  const elementY = rect.top + rect.height / 2 + window.scrollY; // Consider the scroll position

  document.addEventListener('mousemove', function (event) {
    const mouseX = event.clientX;
    const mouseY = event.clientY;

    const angle = Math.atan2(mouseY - elementY, mouseX - elementX);
    const rotation = angle * (180 / Math.PI);

    rotatingObject.style.transform = `translate(-50%, -50%) rotate(${rotation}deg)`;
  });
});

</script>

But there is a new issue…

Issue:
The compass Icon is located in the nav bar, 40px from the top. When I start moving the mouse, the icon disobeys the margin rule and sticks to the top. This can be visible in the example. I tried different combinations of margins, positioning etc.

How can I make the Icon stay in the dedicated position?
What causes it to move?

Any help would be much appreciated!

Live site

Read only link