[komned37]

Добрый день!

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

Разметка:

<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 картинки будет в дальнейшем использоваться на других страницах с разной высотой контента до него.