如何实现图片从固定位置滚动到指定点后停止并随页面滑出？

需求描述 #

我想实现这样的视差效果：向下滚动页面时，图片从初始固定位置移动到指定目标点后停止；到达目标点后继续滚动页面，图片不会越过该点，而是随页面一起滑出窗口，而非固定在顶部。我是视差效果新手，认为这是基础任务，但尚未实现。

尝试过的代码 #

HTML代码 #

<div class="myimg">
    <img src="https://i.imgur.com/pzhXqfp.png" class="self" onclick="scrollWin()">
</div>

JavaScript代码 #

function scrollWin() {
    window.scrollTo(0,1);
}

调整scrollTo的Y轴参数时，试过0、1、50、100、500等数值，但哪怕数值很小，整个页面都会滚动，无法达到预期效果。

补充：我找到一个符合需求的效果示例，其中的产品展示效果就是我想要的——向下滚动到某个Y轴位置后，图片不再继续向下移动，之后随页面滑出。我还试过从Stack Overflow获取的代码，效果接近但不符合需求，它会让图片固定在顶部：

$(window).scroll(function() {
    $(".myimg").css("top",Math.max(0,250-$(this).scrollTop()));
});

解决方案 #

你需要修改位置计算逻辑，让图片在到达目标位置后，不再限制top值，而是跟随页面滚动。核心是判断滚动距离是否超过目标阈值，超过后切换定位方式，让图片随页面滑出。

假设你希望图片在滚动到距离顶部250px的位置后停止移动，之后随页面滑出，可以使用以下代码：

调整后的JavaScript代码 #

$(window).scroll(function() {
    const scrollTop = $(this).scrollTop();
    // 设置图片的目标停止位置（距离顶部的像素值）
    const targetStopPos = 250;

    if (scrollTop <= targetStopPos) {
        // 未到达目标位置前，保持固定定位，计算top值实现视差移动
        const imgTop = Math.max(0, targetStopPos - scrollTop);
        $(".myimg").css({
            "position": "fixed",
            "top": `${imgTop}px`
        });
    } else {
        // 到达目标位置后，切换为绝对定位，固定在目标点，随页面滚动滑出
        $(".myimg").css({
            "position": "absolute",
            "top": `${targetStopPos}px`
        });
    }
});

配套CSS设置 #

需要给图片容器设置初始样式，确保初始位置正确：

.myimg {
    position: fixed;
    top: 250px; /* 初始位置，和代码中的targetStopPos对应 */
    left: 50%; /* 可根据需求调整水平位置 */
    transform: translateX(-50%);
}

效果说明 #

• 滚动页面时，图片会从初始位置向上移动，直到距离顶部250px的位置停止
• 继续滚动页面，图片会保持在该目标位置，随页面向上滑出窗口，不会固定在顶部

内容的提问来源于stack exchange，提问作者user18197093