滚动到某个点后停止动画

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

首先，总结与使用的电话：

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

然后编辑你的函数：

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

希望帮助

Answer 3

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