javascript 将图像从窗口中心zoom 和平移到固定位置

想明白了！归根结底，就是从css的.icon类中删除transform-origin: top left标记，并稍微调整一下翻译值:

const icon = document.querySelector(".icon");

// Set position dynamically on page load
window.addEventListener("load", () => {
    icon.style.left = window.innerWidth / 2 - icon.width / 2 + "px";
    icon.style.top = window.innerHeight / 2 - icon.height / 2 + "px";
});

// Scale and translate icon between center and top left
window.addEventListener("scroll", () => {
    // Hacky math that can be adjusted to fit specific needs
    let scale = 100 - window.scrollY / 6;
    // (window.innerWidth - icon.width) / 2 is the initial position (center)
    // (window.scrollY * window.innerWidth) / 1000 translates to the top left corner
    // (window.scrollY / 100) * 10 determines the 'padding' between the edges and the icon
    let left =
        (window.innerWidth - icon.width) / 2 -
        (window.scrollY * window.innerWidth) / 1000 +
        (window.scrollY / 100) * 10;
    let top =
        (window.innerHeight - icon.height) / 2 -
        (window.scrollY * window.innerHeight) / 1000 +
        (window.scrollY / 100) * 10;

    if (window.scrollY <= 500) {
        // Transform from center to fixed top left position
        icon.style.transform = "scale(" + scale + "%)";
        icon.style.left = left + "px";
        icon.style.top = top + "px";
    } else {
        // Fix transform inaccuracies caused by scrollY jumps
        // The values below are the same as the calculated values above,
        // but solved and simplified with 500 in place of window.scrollY
        icon.style.top = 50 - icon.height / 2 + 'px';
        icon.style.left = 50 - icon.width / 2 + 'px';
        icon.style.transform = 'scale(17%)';
    }
});

同样的代码也已使用此解决方案进行了更新，以防需要交互演示:https://codepen.io/Audity/pen/KKryrjV