滚动到特定点后停止动画

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" );          
        });
    });

- user1763455

Answer 1

如果你想在特定的位置停止，可以使用以下代码：

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

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

- Eric

Answer 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");

- Roko C. Buljan

Answer 3

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

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

然后编辑您的函数：

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

     

希望这有所帮助。

- tobspr