Два эфекта параллакса на странице
 

Добрый день!

Помогите в решении задачи!
Необходимо организовать два параллакса картинки на одной странице:

Разметка:

<div class="cont1"></div>
<div class="cont2">
	<img src="baner.png" alt="a">
</div>
<div class="cont3"></div>
<div class="cont4"></div>
<div class="cont5">
	<img src="baner.png" alt="alt">
</div>
<div class="cont6"></div>

Код js:

$(window).scroll(function() {
  var st = $(this).scrollTop() /20;
  $(".cont2 img").css({
    "transform" : "translate3d(0px, " + st  + "%, .01px)",
    "-webkit-transform" : "translate3d(0px, " + st  + "%, .01px)"
  });

});

$(window).scroll(function() {
  var sst = $(this).scrollTop() /20;
  $(".cont5 img").css({
    "transform" : "translate3d(0px, " + sst  + "%, .01px)",
    "-webkit-transform" : "translate3d(0px, " + sst  + "%, .01px)"
  });
});

В моем случае получается что и 1 и 2 картинка скролится всегда, как только я начинаю крутить колесиком. Как сделать так чтобы картинка скролилась только тогда когда виден пользователю блок с его содержимым. Блок с содержанием 2 картинки будет в дальнейшем использоваться на других страницах с разной высотой контента до него.

komned37,
сделайте минимальный макет, так будет больше шансов на ответ.

Залил проект на хост: http://test-37.info/

komned37,

$(window).scroll(function() {
    var w = $(".cont7-wrap").offset().top - $(this).width();
    if($(this).scrollTop() < w) return;
    var sst = ($(this).scrollTop() - w ) /20;
    $(".cont7-wrap img").css({
        "transform" : "translate3d(0px, " + sst  + "%, .01px)",
        "-webkit-transform" : "translate3d(0px, " + sst  + "%, .01px)"
    });
});

Спасибо большое, все работает отлично!