滚动到某个点后停止动画答案

【问题标题】：Stopping an animation after scrolling to a certain point滚动到某个点后停止动画
【发布时间】：2012-10-21 17:39:42
【问题描述】：

我目前有它用于在您向下滚动屏幕时移动的图像（使用 jQuery 完成），但我希望它们在某个点停止。

这是我目前拥有的代码。

$(document).ready(function() {
        var $bagSix = $("#six");
        var $bagEight = $("#eight");
        var $bagTen = $("#ten");
        var $bagTwelve = $("#twelve");

        $(window).scroll(function(){            
                $bagSix
                .stop()
                .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );

        });

                $(window).scroll(function(){            
                $bagEight
                .stop()
                .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );          
        });

                $(window).scroll(function(){            
                $bagTen
                .stop()
                .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );          
        });

                $(window).scroll(function(){            
                $bagTwelve
                .stop()
                .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );          
        });
    });

【问题讨论】：

标签： jquery animation scroll scrolltop

【解决方案1】：

如果您只想停在某个特定点，您可以这样做：

var new_top = Math.min($(window).scrollTop() + 30, 500);
$bagSix
.stop()
.animate({"marginTop": new_top + "px"}, "slow" );

这会计算新的目标位置，并确保它永远不会超过页面顶部 500 像素。

【讨论】：

【解决方案2】：

jsBin demo

$(document).ready(function() {

    var $bags = $("#six, #eight, #ten, #tweleve");

    $(window).scroll(function(){
        var winScrT = $(window).scrollTop();
        if(winScrT < 789 ){           // or what you prefer         
            $bags.stop().animate({marginTop: winScrT+30 }, "slow" );
        }
    });

});

为什么不为你所有的包只使用一个类，比如：

var $bags = $(".bag");

【讨论】：

【解决方案3】：

首先，使用以下方法总结调用：

$("#image1, #image2, etc.")

然后编辑你的函数：

$(window).scroll(function(){            
    
$images.stop().animate({
        "marginTop": Math.min($(window).scrollTop() + 30, <stopping point>) + "px"}, "slow" );   
 });

希望有帮助

【讨论】：