CSS：使用变换将元素移动到 DOM 上的特定位置

Question

I have an image (svg) that start out in the middle of the page on load. As the user scrolls down, I want to have that image drift up and to the left so that it eventually gets pinned in the top left corner.
I tried using translate with the scroll number but I feel like it's a guessing game on where the image will end up and what path it takes. Here is what I had so far.

 window.addEventListener('scroll', function(evt) { let image = document.getElementById('image'); let scrollY = window.pageYOffset; // how do I use the scrollY to accomplish this? image.style.transform =??

 <div style="text-align: center; background: blue; height: 900px;"> <img id="image" style=" margin-top: 200px; " src="mySvg.svg" /> </div>

Answer 1

for working document.getElementById('image'); need to have is corresponded element.

<img id="image" style=" margin-top: 200px; " src="mySvg.svg" />