Остановка анимации после прокрутки до определенной точки

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