jquery - 滚动到某个点后停止动画

Question

我目前有它用于在您向下滚动屏幕时移动的图像（使用 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" );          
        });
    });

Answer 1

如果您只想停在特定点，您可以执行以下操作：

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

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

Answer 2

jsBin 演示

$(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");

Answer 3

首先，使用以下命令总结调用：

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

然后编辑你的函数：

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

     

希望有帮助